如何同时将元素居中保持引导程序的大小？

Question

目前我有这样的布局：

<div class="row">
    <?php
    foreach ($card_list as $key => $card) {
        echo '<div class="col-xs-4 col-sm-3 col-md-3">';
        echo '</div>';
    }
    ?>
</div>

如果尺寸为md

，这将生成这样的卡片

box1 box2 box3 box4

但是，由于<div class="col-xs-4 col-sm-3 col-md-3">已修复，因此有一些空白空间，例如我只有3盒。由于盒子的数量是动态的，我可以将盒子放在数字中心，例如如果我只有3

offset box1  box2  box3 offset

而不是

 box1  box2  box3  empty area

感谢您的帮助。

Answer 1

在Bootstrap 3中有两种方法可以使列居中：

方法1（抵消）：

第一种方法使用Bootstrap自己的偏移类，因此不需要更改标记，也不需要额外的CSS。关键是设置一个偏移量等于行剩余大小的一半。因此，例如，大小为2的列将通过添加5的偏移来居中，即(12-2)/2。 在标记中，这看起来像：

<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>

现在，这种方法有一个明显的缺点，它只适用于偶数列，所以只有.col-X-2，.col-X-4，col-支持X-6，col-X-8和col-X-10。

---

方法2（旧边距：自动）

您可以使用经验证的margin: 0 auto;技术使任何列大小居中，您只需要处理Bootstrap网格系统添加的浮动。我建议定义一个自定义CSS类，如下所示：

.col-centered{
float: none;
margin: 0 auto;
}

现在，您可以将其添加到任何屏幕大小的任何列大小，并且它将与Bootstrap的响应式布局无缝协作： 注意：使用这两种技术，您可以跳过.row元素并将列置于.container内，但由于填充，您会注意到实际列大小的最小差异在容器类中。

<小时/> 的更新 从v3.0.1开始，Bootstrap有一个名为center-block的内置类，它使用margin：0 auto但缺少float：none。您可以将其添加到CSS中，以使其与网格系统一起使用。