jquery - 如何使元素居中同时保持 Bootstrap 的大小？

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。

---

方法二(旧的margin:auto)

您可以使用经过验证的 margin: 0 auto; 技术居中任何列大小，您只需要处理由 Bootstrap 的网格系统添加的 float 。我建议像下面这样定义自定义 CSS 类:

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

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

---

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