Question

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

Answer 1

在bootstrap中还有一个偏移类，可以在html下面移动div的使用来获得你想要的东西

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

Answer 2

而不是使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;
}

bootstrap column auto center column

2 个答案: