Bootstrap 3中的最后一列居中答案

【问题标题】：Center last column(s) in Bootstrap 3Bootstrap 3中的最后一列居中
【发布时间】：2019-11-21 15:21:30
【问题描述】：

我有随机数的列（由 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

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：

【解决方案2】：

像这样尝试.. 我添加了 align-center 类来显示中心 div

html

<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 align-center">
    <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>

css

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

【讨论】：

【解决方案3】：

像这样<div class ="col-sm-offset-2>将这个添加到第4个div

【讨论】：

我说我的列数是随机的。