На моей странице у меня много элементов, которые мне нужно показать несколькими подряд в прямых столбцах. Каждый элемент представляет собой изображение равного размера. Когда вы нажимаете на него, на нем появляется меню значков с тремя элементами подряд. Все элементы должны быть расположены по горизонтали и вертикали.
Может быть разное количество больших изображений (6, 7, 8 или более), поэтому я хочу добавить их в один класс строк.
Теперь, я думаю, что я делаю все, используя документацию по начальной загрузке, но логика элементов на стальной странице выглядит сломанной.
Что я делаю неправильно?
<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 Центрировать только один элемент в конце недостаточно, потому что нам нужно знать, как центрировать от одного до максимального количества элементов в последней строке, сеять, что мы могли бы загружать все элементы на странице, не беспокоясь о центрировании последней строки.