twitter-bootstrap - 如何在 Bootstrap 中将 cols 居中？

Question

我有 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>

Answer 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 预览。请记住，行内的列总和必须为 12 (4+4+4)。

Answer 2

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

.col-center {
  margin: auto;
}