И так, довольно часто я сталкиваюсь с проблемой блоков с различными размерами высоты из-за различного содержимого в то время как эти блоки должны быть одинаковы по высоте. Решить эту проблему достаточно просто. Рассмотрим несколько способов.
Для начала предположим что страница в которой нужно выровнять блоки по высоте имеет следующую 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); }); });
Комментарии
Действительно, проблема уравнивания высоты колонок Bootstrap - весьма насущна. Сам долгое время искал решение. Попробовал то, что здесь предложено. В результате: первый способ - растягивается высота меньшей колонки до высоты большей, но всё её содержимое (включая картинки) - также вытягивается непропорционально, т.е. требуется куча доработок, чтобы содержимое так не растягивалось. Либо я что-то упустил? Второй способ - с помощью JQuery. Работает отлично, как раз то, что нужно, но... В мобильных устройствах сохраняется высота колонки, заданная при помощи JQuery, образуя под содержимым большое пустое пространство. Видимо, имеет смысл как-то доработать скрипт, чтобы он не влиял на высоту колонок устройств с экранами xs.
ОтветитьУважаемый Сергей, вы просто используйте скрипт наподобие device.js который в тег HTML записывает в класс тип устройства и далее в jQuery используйте конструкцию вида $(".desktop .myselector").each(function(){ ... - таким образом вы отгородите мобильные устройства от работы этого скрипта
Ответитьcol-xs-12 col-sm-6 col-md-4 col-lg-3
Ответитьне работает адаптивность при первом способе
Надо добавить
для адаптивности. Если я правильно понял проблему.Ответить
Доброго времени суток,
Ответитьотправил пару часов назад вопрос почтой (с адреса, как в регистрации). Гляньте, плз...А то притормозились с дальнейшей версткой :)
Супер, спасибо! Работает как надо.
Ответить