Переносы элементов сетки bootstrap разной высоты (фикс для версии 3.x)

В третей версии бутстрапа используется выравнивание элементов сетки col-* с помощью свойства float: left;. Пока элементы в сетке имеют одинаковую высоту, то никаких проблем с переносами нет.

В HTML это выглядит так:

Но стоит нам увеличить высоту одной из ячеек, как верстка тут же ломается:

Способ № 1

Первым очевидным решением является переход на 4ю версию, где верстка построена на CSS flex. Для старых проектов это всегда сделать не просто, так как придется тестировать всю верстку.

Способ № 2

Проблема известна, и разработчики фреймворка предлагают добавить в верстку .clearfix контейнеры. Это подходит для решения ряда проблем, но не при выводе списков (например списка товаров), когда число элементов заранее не известно.

Фикс позволит вам получить следующую сетку контейнеров:

Чтобы это применить к разным сеткам (не только xs) придется вставлять контейнеры в соответствующие места списка. Но этот метод работает для старых браузеров, которые не поддерживают CSS flex.

Способ № 3

Этот способ возвращает нас к 1му методу, т.е. мы будем использовать стили flex, чтобы пофиксить сетку bootstrap 3.x.

Поправим стиль контейнера .row следующим образом:

Данный фикс исправит сетку вот так:

Результат отличается от того, что мы получаем при добавлении контейнера .clearfix. А также можно забыть о работе в старых браузерах. Но данный способ избавляет нас править шаблоны, фаршируя их лишними контейнерами.

Оформим правки в виде CSS класса:

Осталось добавить класс к нужные нам контейнера .row.

Написать комментарий

Мало букафф? Читайте есчо !

Меняем отступы сетки (gutter-width) в Bootstrap

Октябрь 2, 2017 г.

Дефолтова сетка в bootstrap 3 имеет размер 30 пикс. Понятно, что рабочий макет может содержать произвольные отступы и, если вы хотите использовать преимущества работы с grid от бутстрапа, придется как то их менять и фиксить. Фактически нужно сделать ...

Читать

Bootstrap extra large - стили для сетки свыше 1600 точек

Апрель 20, 2017 г.

3я версия Bootstrap определяет 4 размера сетки: <768px, ≥768px, ≥992px, ≥1200px. Этих размерностей явно не достаточно. В то время как на телефонах ...

Читать

 

Комментарии к «Переносы элементов сетки bootstrap разной высоты (фикс для версии 3.x)»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: