Основные элементы центрирования в классе адаптивной строки в бутстрапе

На моей странице у меня много элементов, которые мне нужно показать несколькими подряд в прямых столбцах. Каждый элемент представляет собой изображение равного размера. Когда вы нажимаете на него, на нем появляется меню значков с тремя элементами подряд. Все элементы должны быть расположены по горизонтали и вертикали.

Может быть разное количество больших изображений (6, 7, 8 или более), поэтому я хочу добавить их в один класс строк.

Теперь, я думаю, что я делаю все, используя документацию по начальной загрузке, но логика элементов на стальной странице выглядит сломанной.

Что я делаю неправильно?

Пример Codepen

<body>
  <div class="container-fluid wrapper">
    <div class="row center-block text-center">
      <div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="row center-block">
          <div class="col-md-12 center-block">
            <img src="http://img.leprosorium.com/2474872">
          </div>
        </div>
      </div>
      <div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="row center-block">
          <div class="col-md-12 center-block">
            <img src="http://img.leprosorium.com/2474872">
          </div>
        </div>
      </div>
      <div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="row center-block">
          <div class="col-md-12 center-block">
            <img src="http://img.leprosorium.com/2474872">
          </div>
        </div>
      </div>
      <div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="row-fluid center-block text-center pagination-centered">
          <div class="col-md-4 center-block text-center pagination-centered link">
            <a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
          </div>
          <div class="col-md-4 center-block text-center pagination-centered link">
            <a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
          </div>
          <div class="col-md-4 center-block text-center pagination-centered link">
            <a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
          </div>
          <div class="col-md-4 center-block text-center pagination-centered link">
            <a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
          </div>
          <div class="col-md-4 center-block text-center pagination-centered link">
            <a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
          </div>
          <div class="col-md-4 center-block text-center pagination-centered link">
            <a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
          </div>
          <div class="col-md-4 center-block text-center pagination-centered link">
            <a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
          </div>
          <div class="col-md-4 center-block text-center pagination-centered link">
            <a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
          </div>
          <div class="col-md-4 center-block text-center pagination-centered link">
            <a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
          </div>
        </div>
      </div>
      <div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="row center-block">
          <div class="col-md-12 center-block">
            <img src="http://img.leprosorium.com/2474872">
          </div>
        </div>
      </div>
      <div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="row center-block">
          <div class="col-md-12 center-block">
            <img src="http://img.leprosorium.com/2474872">
          </div>
        </div>
      </div>
      <div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="row center-block">
          <div class="col-md-12 center-block">
            <img src="http://img.leprosorium.com/2474872">
          </div>
        </div>
      </div>
      <div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="row center-block">
          <div class="col-md-12 center-block">
            <img src="http://img.leprosorium.com/2474872">
          </div>
        </div>
      </div>
      <div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="row center-block">
          <div class="col-md-12 center-block">
            <img src="http://img.leprosorium.com/2474872">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Снимок экрана о том, что я получаю:

Снимок экрана о том, что мне нужно:

Пожалуйста, указывайте мне в правильном направлении. Заранее спасибо. Я смог сделать это без бутстрапа, b надеюсь, что это можно сделать только с помощью правильного использования бутстрапа и элементов, потому что я хочу сохранить адаптивный макет.

UPD @LegendaryAks устранила проблему с помощью пробела, используя <div class="clearfix"></div> после элемента значков, но проблема центрирования всех элементов для адаптивной компоновки и неизвестного количества общих элементов все еще открыта.

UPD2 Центрировать только один элемент в конце недостаточно, потому что нам нужно знать, как центрировать от одного до максимального количества элементов в последней строке, сеять, что мы могли бы загружать все элементы на странице, не беспокоясь о центрировании последней строки.

Ответы

Ответ 1

Там вы идете, я думаю, что это сделал трюк. Вы можете проверить демо в http://codepen.io/anon/pen/QybXQJ?editors=100

Что я сделал, так я добавил div с классом clearfix после четвертого div. Надеюсь, это то, что вы ищете.

<div class="clearfix"></div>

Ответ 2

существует решение, использующее только css:

.center-block-big:nth-child(4n+1) {
  clear: left;
}
.center-block-big:last-child {
  margin: 0 auto;
  float: none;
}

единственное, что в этом примере я удалил col-lg-2, чтобы применить его ко всему разрешению, и отредактировал имя класса, чтобы применить его только к контейнеру больших изображений, а не к твиттерам.

обновлено codepen

Если вы хотите, чтобы пространство было на lg-разрешении, вам нужно немного играть с шириной col:

обновлено codepen

Если у вас есть динамические элементы, вы можете использовать это, чтобы сделать это, только если один элемент находится в строке, он будет центрирован:

.center-block-big:nth-child(4n+1) {
  clear: left;
}
.center-block-big:last-child:not(:nth-child(5n)) {
  margin: 0 auto;
  float: none;
}
.center-block-big:nth-child(4n+2),
.center-block-big:nth-child(4n+3),
.center-block-big:nth-child(4n) {
  float: left!important;
}

обновлено codepen, добавьте элементы .center-block-big, чтобы увидеть эффект

Ответ 3

используйте col-md-12 вместо col-md-6 в последнем элементе вашего дизайна. Попробуйте следующее:

<div class="col-md-12 center-block text-center pagination-centered link">
    <a target="_blank" href="#">VK</a>
</div>

<div class="col-md-12 center-block text-center pagination-centered link">
    <a target="_blank" href="#">FB</a>
</div>

для вертикального выравнивания используйте новый класс

.verticalcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

и использовать его. создайте структуру HTML, как показано ниже:

First Row..
<div class="row center-block text-center">
    <div class="center-block col-md-4">
    </div>
    <div class="center-block col-md-4">
    </div>
    <div class="center-block col-md-4">
    </div>
</div>
Second Row..
<div class="row center-block text-center">
    <div class="center-block col-md-4">
    </div>
    <div class="center-block col-md-4">
    </div>
    <div class="center-block col-md-4">
    </div>
</div>