Как центрировать столбцы Bootstrap, когда они являются нечетным числом?

Я создаю слайдер изображения, используя Bootstrap, и имею проблему, которую я не могу решить в своей голове.

В каждом экземпляре этого слайдера у меня будут трехстрочные эскизы (по 4 строки). Тем не менее, некоторые слайдеры не будут иметь 4 эскизов, у некоторых будет 1, 2 или 3. В этих случаях я хотел бы центрировать миниатюры горизонтально, сохраняя тот же самый 15px желоб, который у них был бы, если бы их было 4.

Теперь, когда есть только 2 уменьшенных изображения, это легко, потому что я могу просто добавить пустой трехзначный div до и после набора миниатюр. Когда есть только 1 миниатюра, я могу удалить float и использовать margin:0 auto; в центре, но я не могу понять, что делать, когда есть 3 миниатюры.

Может ли кто-нибудь сказать мне, что лучший способ добиться этого? Я думал, что было бы неплохо настроить половину столбцов, чтобы я мог просто положить пустой разделитель на 1,5 столбца до и после эскизов. Возможно ли это?

Вот пример кода для 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

Ответы

Ответ 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>

Демо

Ответ 2

В моем случае div имеет класс col-xs-11. Итак, добавлен следующий css, чтобы сделать его идеально подходящим для небольших экранов. Примечание: важны настройки float и margin.

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

Ответ 3

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>