Bootstrap4中col-8无法在栅格系统居中的问题排查

学习Bootstrap4栅格系统时，尝试在row中用两侧空col包裹col-8实现居中，但col-8却向左偏移。视频使用的是Bootstrap4 alpha版本，以下是我的代码，期望col-8自动居中但未实现，该如何调整？

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="main.css">
</head>

<body class="signin-body">
<div class="container signin-container">
  <div class="row">
      <div class="col"></div>
      <div class="col-8">
        <div class="card signin-card" style="width: 27rem;">
          <div class="card-body">
            <img src="assets/DevslopesLogo.png" class="img-fluid signin-img" alt="Logo here">
            <form class="signin-form">
              <div class="form-group">           
                 <input type="email" class="form-control" id="emailInput" aria-describedby="emailHelp" placeholder="Enter email">
              </div>
              <div class="form-group">               
                 <input type="password" class="form-control" id="passwordInput" placeholder="Password">
              </div>
              <button type="button" class="btn signin-btn btn-lg">Sign In</button>
              <div class="form-check mb-2 mr-sm-2">
                <input class="form-check-input" type="checkbox" id="inlineFormCheck">
                <label class="form-check-label" for="inlineFormCheck">
                  Remember me<a href="#"> Need Help?</a>
                </label>
              </div>
            <p class="card-text">Some quick example text .</p>
          </div>
        </div>
        <a href="#" class="create-new-account">Create New Account</a>
      </div>
      <div class="col"></div>
  </div>  

</div>



  
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <!--  Always Download latest version of Boostrap and add here-->
  <script src="bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

</html>

解决方案 #

问题根源 #

1. Bootstrap4 alpha版本到正式版的栅格逻辑有变更，两侧空col无法自动均分剩余宽度实现居中，这是写法失效的核心原因
2. 代码中重复引入了Bootstrap的CSS和JS文件，可能引发样式冲突
3. 卡片设置了固定宽度style="width: 27rem;"，会干扰居中效果的呈现

调整方案 #

推荐两种Bootstrap4官方支持的可靠居中方式：

方式一：使用自动margin工具类

直接给col-8添加mx-auto类，利用Bootstrap的margin自动居中工具类，无需两侧空col：

<div class="row">
  <div class="col-8 mx-auto">
    <!-- 卡片内容 -->
  </div>
</div>

方式二：使用flex布局工具类

给row添加justify-content-center类，通过flex布局直接让子元素居中：

<div class="row justify-content-center">
  <div class="col-8">
    <!-- 卡片内容 -->
  </div>
</div>

完整修正代码 #

清理重复引入的文件，去掉卡片固定宽度（如需限制宽度可使用max-width或Bootstrap宽度工具类）：

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="main.css">
</head>

<body class="signin-body">
<div class="container signin-container">
  <div class="row justify-content-center">
      <div class="col-8">
        <div class="card signin-card">
          <div class="card-body">
            <img src="assets/DevslopesLogo.png" class="img-fluid signin-img" alt="Logo here">
            <form class="signin-form">
              <div class="form-group">           
                 <input type="email" class="form-control" id="emailInput" aria-describedby="emailHelp" placeholder="Enter email">
              </div>
              <div class="form-group">               
                 <input type="password" class="form-control" id="passwordInput" placeholder="Password">
              </div>
              <button type="button" class="btn signin-btn btn-lg">Sign In</button>
              <div class="form-check mb-2 mr-sm-2">
                <input class="form-check-input" type="checkbox" id="inlineFormCheck">
                <label class="form-check-label" for="inlineFormCheck">
                  Remember me<a href="#"> Need Help?</a>
                </label>
              </div>
            <p class="card-text">Some quick example text .</p>
          </div>
        </div>
        <a href="#" class="create-new-account">Create New Account</a>
      </div>
  </div>  

</div>

  
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js"></script>
</body>

</html>

内容的提问来源于stack exchange，提问作者Ahmed Maged Ali Fetyan