如何在 Bootstrap 中居中列？答案

【问题标题】：How can I center cols in Bootstrap?如何在 Bootstrap 中居中列？
【发布时间】：2015-11-07 10:32:10
【问题描述】：

我有 3 列：

我想将 cols 放在页面中间以进行响应式设计。因此，如果我在手机上查看它们，它们应该相互之间。那么如何才能居中呢？

这是我的代码：

<div class="container">
<div class="row text-center">
    <div class="col-xs-4 glyphicon glyphicon-flash"><h3>Professional</h3></div>
    <div class="col-xs-4 glyphicon glyphicon-picture"><h3>Exactly</h3></div>
    <div class="col-xs-4 glyphicon glyphicon-screenshot"><h3>Custom</h3></div>
    <div class="col-xs-4"></div>
</div></div>

【问题讨论】：

标签： twitter-bootstrap center col

【解决方案1】：

网格布局会自动居中。我稍微修改了你的代码：

<div class="container">
<div class="row text-center">
    <div class="col-xs-4 glyphicon glyphicon-flash">      
        <h3>Professional</h3>
    </div>
    <div class="col-xs-4 glyphicon glyphicon-picture">
        <h3>Exactly</h3>
    </div>
    <div class="col-xs-4 glyphicon glyphicon-screenshot">
        <h3>Custom</h3>
    </div>
</div>
</div>

这里是jsfiddle preview。请记住，行内的列总和必须为 12 (4+4+4)。

【讨论】：

那么是额外的div 使文本不居中吗？
是的，额外的col-xs-4 将所有其余部分“推”到了左边。这里没有其他事情可做。

【解决方案2】：

一种解决方案是将您自己的类添加到行 div（例如 col-center），然后使用 CSS 居中该行：

.col-center {
  margin: auto;
}

【讨论】：