Переносы элементов сетки 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.

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

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

Шпаргалка по размеру сетки bootstrap v3 и v4

Апрель 6, 2019 г.

Для тех кто использует с 3ю и 4ю версии бутстрапа и постоянно забывает размеры сетки (grid). Здесь приведены таблицы для сетки по-умолчанию (в общем ...

Читать

Центровка по вертикали модального окна в Bootstrap

Май 5, 2017 г.

Модальные окна Bootstrap всем хороши, но имеют одну досадную недоработку - нет вертикальной центровки. Выглядит это недоразумение вот так: ...

Читать

 

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

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



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