Twitter Bootstrap - один из самых известных и мощных CSS, JavaScript фреймворков на сегодняшний день. Его используют миллионы разработчиков в своих проектах. Но он не идеален, бывают задачи которые нельзя реализовать стандартными возможностями Twitter Bootstrap. И разработчики ищут обходные пути для реализации своих задач.

Ниже будет реализован пример выравнивания по высоте нескольких блоков (колонок) по высоте в Twitter Bootstrap.

Я довольно часто сталкиваюсь с проблемой блоков с различными размерами высоты из-за различного содержимого в то время как эти блоки должны быть одинаковы по высоте. Решить эту проблему достаточно просто. Рассмотрим несколько способов.

Для начала предположим что страница в которой нужно выровнять блоки по высоте имеет следующую HTML разметку:

<div class="row">
 <div class="col-md-4">
 <p>Строка 1</p>
 <p>Строка 2</p>
 <p>Строка 3</p>
 </div>
 <div class="col-md-4">
 <p>Строка 4</p>
 <p>Строка 5</p>
 </div>
 <div class="col-md-4">
 <p>Строка 6</p>
 </div>
</div>

Выравнивание блоков по высоте в Twitter Bootstrap с помощью CSS

Мы можем выравнять эти колонки с помощью CSS3, обратите внимание, что это способ будет работать только в современных браузерах, которые поддерживают CSS3.

.equal, .equal > div[class*='col-'] {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex:1 0 auto;
}

Теперь добавьте класс equal к классу row главного блока и колонки будут равными по высоте.

Выравнивание блоков по высоте в Twitter Bootstrap с помощью jQuery

Решение с помощью JQuery может быть реализовано без добавления дополнительных CSS классов.

Проверяем в цикле наибольшую высоту блока и задаем эту высоту остальным блокам:

$(document).ready(function(){
 $('.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);
 });
});