Переносы элементов сетки 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 - показ произвольного html контента подсказки в popover

Июнь 14, 2021 г.

Один из компонентов Bootstrap - popover - создаёт оформление и показывает текст подсказки при нажатии на контейнер. Рассмотрим более сложный кейс использования этого компонента, а именно, создание контента для popover на лету. Стандартный шаблон ...

Читать

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

Май 5, 2017 г.

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

Читать

 

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

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



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