Bootstrap将整列中的所有列居中

Question

我目前正在使用Bootstrap创建一个网页,我正在使用列.我的页面看起来像这样:

我想将最后一列(在第二行)居中,但页面是动态的,我不知道有多少个容器.

我在Google上找到了这两个解决方案:

1)将此添加到我的CSS:

.col-centered{
  float: none;
  margin: 0 auto;
}

2)将其添加到类标记属性

col-lg-offset-4

但两种解决方案都是这样的:

那不是我想要的.我希望它看起来像这样:

我怎样才能实现这一目标？

Answer 1

Bootstrap 的列默认通过 css 属性浮动float。我们float无法将列居中对齐。然而，有了display: inline-block我们，我们就可以做到。我们需要做的就是从列的样式中删除float并将它们更改为inline-blockwith vertical-align: middle，您就会得到您想要的。但不要忘记删除它附带的额外空间inline-block。

这就是窍门。

.wrapper {
  background: green;
  padding: 20px 0;
}

.box {
  border-radius: 10px;
  margin-bottom: 30px;
  background: #fff;
  padding: 10px;
  color: #000;
}

.center-align {
  letter-spacing: -4px;
  text-align: center;
  font-size: 0;
}

.center-align [class*='col-'] {
  display: inline-block;
  vertical-align: top;
  letter-spacing: 0;
  font-size: 14px;
  float: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="container center-align">
    <div class="row">
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container center-align">
    <div class="row">
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="box">
          <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
</div>

注意：设置font-size：0；父级上的字母间距：-4px 并应用父级的字体大小：14px；letter-spacing: 0 返回子元素将删除 inline-block 附带的空白。