当我放大时，为什么这只是居中的？ （使用bootstrap）

Question

如果您将以下代码全屏显示，那么只要我放大了足够的元素，元素就只会在页面上居中。我怎么能这样做才能让它集中在一起？

docObject: ac2vZkPueChM5rsSB

result: undefined

Answer 1

因为Bootstrap。

width上.col-md-4的默认值为33.3333%。因此，由于div没有浮动或边距或任何东西，它只是简单地与屏幕的左侧对齐，并且其中的内容可以正中居中，但这并不明显。

一种解决方案是删除col-md-4类。

.col-centered {
  float: none;
  text-align: center;
}
.col-centered table {
  margin: 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container-fluid'>
  <div class='quiz-list'>
    <div class='row'>
      <div class='col-centered'> <!-- this -->

        This text should be centered and the table underneath should be centered as well

        <table class="table">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>

</div>

我也尝试了其他解决方案，例如明确设置宽度或边距，但这似乎不起作用。

编辑：
哦，我明白为什么其他解决方案不起作用：因为在这个片段中，Bootstrap css在页面中的样式块之后加载。
在正常情况下，在加载Bootstrap样式表后将东西放在样式表中可以正常工作以覆盖它。因此，无论您喜欢什么，都可以使用width:auto或margin:0 auto。

Answer 2

在css文件中，更新

.col-centered {
  float: none;
  text-align: center;
}

作为

.col-centered {
    float: none !important;
    text-align: center;
    margin: 0 auto;
}