Колонки одинаковой высоты в Bootstrap 3
Довольно часто при использовании сетки Bootstrap 3 (в Bootstrap 4 такой проблемы уже нет) мы сталкиваемся с проблемой, когда блоки (col-*-*
) имеют разные размеры высоты. Такие блоки (колонки) могут иметь разное содержимое из-за чего и появляется разница в их высоте. Решить эту проблему достаточно просто. Рассмотрим несколько способов.
Использование модуля Flexbox из CSS3
Наверное, это самый практичный способ выравнивания высоты колонок.
Разметка HTML:
<div class="container"> <div class="row row-flex"> <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4"> <!-- содержимое блока --> </div> </div> </div>
Добавить стили для класса row-flex
:
.row-flex { display: flex; flex-flow: row wrap; }
С помощью jQuery
Здесь нет необходимости использовать дополнительные классы. jQuery сам всё найдёт и применит нужные преобразования.
Разметка HTML:
<div class="container"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4"> <!-- содержимое блока --> </div> </div> </div>
jQuery скрипт:
$('.container').each(function(){ var highestBox = 0; $('.col-md-4 ', this).each(function(){ if($(this).height() > highestBox) { highestBox = $(this).height(); } }); $('.col-md-4 ',this).height(highestBox); });
Более короткий и универсальный jQuery скрипт:
$(function(){ var equal_height = 0; $(".row div").each(function(){ if ($(this).height() > equal_height) { equal_height = $(this).height(); } }); $(".row div").height(equal_height); });