Question

我有3个小册子：

http://fs1.directupload.net/images/150814/wfvxpvgy.png

我想将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 preview。请记住，列总是必须总和为12（4 + 4 + 4）。

Answer 2

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

.col-center {
  margin: auto;
}

我怎样才能在Bootstrap中居中？

2 个答案: