Bootply

Question

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

在此滑块的每个实例下，我将有3列缩略图（每行4个）。但是，有些滑块不会有4个缩略图，有些会有1个，2个或3个。在这些情况下，我想将缩略图水平居中，同时保持相同的15px排水沟，如果有4个缩放。 / p>

现在当只有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>

<强> Demo

Answer 2

Bootstrap 4：中心奇数列

我知道最初的问题是Bootstrap 3.x时间帧，但现在4.x可用中心奇数列更容易。以下是使用新auto-layout grid的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，也适用于视口中的any number of odd columns。

您还可以使用行上的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>

Answer 3

就我而言，div有类col-xs-11。因此，添加了以下css，使其完美地位于小屏幕的中心位置。注意：设置float和margin很重要。

  padding-left:0;
  padding-right:0;
  float:none;
  margin:auto

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

Bootply

3 个答案: