我怎样才能在 Bootstrap 中居中列？

Question

我有 3 个列：

我想将列居中放置在页面中间以进行响应式设计。因此，如果我在我的手机 phone 上查看它们，它们应该在他们之间。那么怎么才能居中呢？

这是我的代码：

<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

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

将行居中

.col-center {
  margin: auto;
}

Answer 2

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

<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)。

我怎样才能在 Bootstrap 中居中列？

How can I center cols in Bootstrap?

twitter-bootstrap

center

col