Колонки одинаковой высоты в 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);
});
Предыдущая запись
Как русифицировать IDE EclipseСледующая запись
Учебные базы данных MySQL