引导柱自动中心柱答案

【问题标题】：bootstrap column auto center column引导柱自动中心柱
【发布时间】：2016-07-07 20:51:35
【问题描述】：

我有 bootstrap col，如下所示：

<div class="col-sm-2 col-xs-4 half-padding">hi</div>
<div class="col-sm-2 col-xs-4 half-padding">hi</div>

现在我们只有 3 个 div，所以它不会覆盖整个列，有什么方法可以让这两个显示在中心而不是从左到右？

请告诉如何做同样的事情

还有一个问题是 col 是动态生成的：

所以如果你有 5 个块，那么 12/5=2 所以

<div class="col-sm-2 col-xs-4 half-padding">hi</div>
<div class="col-sm-2 col-xs-4 half-padding">hi</div>
<div class="col-sm-2 col-xs-4 half-padding">hi</div>
<div class="col-sm-2 col-xs-4 half-padding">hi</div>
<div class="col-sm-2 col-xs-4 half-padding">hi</div>

【问题讨论】：

你总共有多少个div？
这些div是动态生成的
为什么半填充后有""？
@mourjewels 你检查我的答案了吗？
我更新了我的 qusn，我无法将 col-2 更改为 col-3，因为代码生成了在行值内以正确方式分配块

标签： html css twitter-bootstrap

【解决方案1】：

不要制作4-columns 8-columns div 布局，而是制作6-columns 12-columns div 并将它们包装在一个div 中并将其居中：

<div class="wrap">
   <div class="col-sm-3 col-xs-6 half-padding">hi</div>
   <div class="col-sm-3 col-xs-6 half-padding">hi</div>
</div>

.wrap {
    max-width: 700px;    /* define as your layout */
    margin: 0 auto;
    text-align: center;
}

【讨论】：

【解决方案2】：

bootstrap 中还有一个偏移类，可以将 div 的使用转移到 html 下面，以获得您想要的内容

<div class="col-sm-2 col-sm-offset-4 col-xs-4 col-xs-offset-2 half-padding">hi</div>
<div class="col-sm-2 col-sm-offset-4 col-xs-4 col-xs-offset-2 half-padding">hi</div>

【讨论】：