如何将Bootstrap列作为奇数列中心？

Question

我正在使用Bootstrap创建一个图像滑块,并且有一个我似乎无法解决的问题.

在此滑块的每个实例下,我将有3列缩略图(每行4个).但是,有些滑块不会有4个缩略图,有些会有1个,2个或3个.在这些情况下,我想将缩略图水平居中,同时保持相同的15px排水沟,如果有4个.

现在当只有2个缩略图时,这很容易,因为我只需在缩略图集之前和之后添加一个空的3列div.当只有一个缩略图时,我可以删除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>

演示

Answer 2

Bootstrap 4：中心奇数列

我知道最初的问题是Bootstrap 3.x时间范围，但是现在可以使用4.x居中以奇数列为中心了。这是一个使用新的自动布局网格的5个相等的全角列（无额外CSS）的示例。

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

http://www.codeply.com/go/MJTglTsq9h

之所以可以使用此解决方案，是因为Bootstrap 4现在是flexbox，并且还适用于视口中任意数量的奇数列。

您也可以justify-content-center在行上使用已定义宽度的“经典网格”列居中。例如5 col-sm-2列...

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-sm-2">

        </div>
        <div class="col-sm-2">

        </div>
        <div class="col-sm-2">

        </div>
        <div class="col-sm-2">

        </div>
        <div class="col-sm-2">

        </div>
    </div>
</div>