我如何在Bootstrap中对列进行居中？

Question

我有3个栏位：

我想在页面中间居中进行响应式设计。因此，如果我在手机上查看它们，则它们之间也应该相互关联。那么如何将它们居中？

这是我的代码：

<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 preview。请记住，列在一行中的总和必须等于12（4 + 4 + 4）。

Answer 2

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

.col-center {
  margin: auto;
}