html - 在 Bootstrap 3 中居中最后一列

Question

我有随机数的列(由 FOR 循环生成)。

  <div class="container">
    <div class="row">
      <div class="col-sm-4 col-xs-6">CONTENT</div>
      <div class="col-sm-4 col-xs-6">CONTENT</div>
      <div class="col-sm-4 col-xs-6">CONTENT</div>
      <div class="col-sm-4 col-xs-6">CONTENT</div>
      <div class="col-sm-4 col-xs-6">CONTENT</div>
    </div>
  </div>

我想将最后一行列居中。默认情况下，最后 1 或 2 列左对齐。有什么方法可以轻松地将它们居中，还是我应该跳过使用“col-”并改用 flexbox？

Source: CODEPEN.IO

Answer 1

您可以将 flex 样式添加到列的父级，在此示例中为 .row。

.mycol {
  background: tomato;
  padding: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

.row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
<div class="container">
  <div class="row">
    <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
        <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
            <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
            <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
    <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
  </div>
</div>