html - 当 Bootstrap 列为奇数时如何居中？

Question

我正在使用 Bootstrap 创建一个图像 slider ，但遇到了一个我似乎无法解决的问题。

在此 slider 的每个实例下，我将有 3 列缩略图(每行 4 个)。但是，有些 slider 不会有 4 个缩略图，有些会有 1、2 或 3 个。在这些情况下，我想将缩略图水平居中，同时保持与有 4 个缩略图时相同的 15px 间距。

现在当只有 2 个缩略图图像时，这很容易，因为我可以简单地在缩略图集前后添加一个空的 3 列 div。当只有 1 个缩略图时，我可以删除 float 并使用 margin:0 auto; 居中，但是当有 3 个时我不知道该怎么做缩略图。

谁能告诉我实现此目标的最佳方法是什么？我当时认为能够设置半列会很好，这样我就可以在缩略图前后放置一个空的 1.5 列 div。这可行吗？

这是 3 缩略图版本的一些示例代码:

<div id="container">

  <div class="row">

    <!-- Full Size Image -->
    <div class="col-sm-12">
      <img src="http://placehold.it/960x300" />
    </div>

    <!-- Slider Thumbnails -->
    <div class="col-sm-3">
      <img src="http://placehold.it/200x150" />
    </div>
    <div class="col-sm-3">
      <img src="http://placehold.it/200x150" />
    </div>
    <div class="col-sm-3">
      <img src="http://placehold.it/200x150" />
    </div>

  </div>

</div>

我已经设置了一个 Bootply，它显示了我如何解决 1 个缩略图和 2 个缩略图版本:

Bootply

Answer 1

.row.text-center > div {
    display: inline-block;
    float: none;
}

<div class="row text-center">
    <!-- Slider Thumbnails -->
    <div class="col-sm-3">
        <img src="http://placehold.it/200x150">
    </div>
    ...
</div>

Demo