Использование twitter bootstrap 2.0 – Как сделать равные высоты столбцов?

У bootstrap 2.0 есть помощники, чтобы сделать .span1, .span2 …. .span12 равной высотой. Я вложил этот тип html

XXXX
XXXX XXXX
XXXX XXXX XXXX

Я бы хотел, чтобы каждая скважина оказалась на одном уровне, если это возможно?

Вот отзывчивое решение CSS, основанное на добавлении большого отступов и одинаково большого отрицательного поля для каждого столбца, а затем обертывание всей строки в class с скрытым переполнением.

 .col{ margin-bottom: -99999px; padding-bottom: 99999px; background-color:#ffc; } .col-wrap{ overflow: hidden; } 

Вы можете видеть, как он работает в jsFiddle

редактировать

В ответ на вопрос, вот вариант, если вам нужны равные высоты колодцы или столбцы с одинаковой высотой с закругленными углами: http://jsfiddle.net/panchroma/4Pyhj/

редактировать

В ответ на вопрос, вот такой же метод в Bootstrap 3, тот же принцип, просто обновите имена classов в сетке Bootstap: http://jsfiddle.net/panchroma/bj4ys/embedded/result/

Попробуйте что-то вроде этого (но не очень элегантно):

 $('.well').css({ 'height': $('.well').height() }); 

Метод jQuerys height() возвращает наибольшее значение при выборе нескольких элементов.

См. JsFiddle: http://jsfiddle.net/4HxVT/

Метод height () jQuery возвращает значение «первого элемента в наборе согласованных элементов». Ответ в http://jsfiddle.net/4HxVT/ работает только потому, что первый элемент в строке также является самым высоким.

Вот еще одно решение на основе jQuery:

http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

(Через этот ответ: https://stackoverflow.com/a/526316/518535 )

Расширение ответов уже было дано, я только что решил это с помощью jquery и подчеркивания . Ниже fragment выравнивает высоту моих колодцев и предупреждений, которые появляются в данной строке, независимо от того, где находится самый высокий:

 $('.well, .alert').height(function () { var h = _.max($(this).closest('.row').find('.well, .alert'), function (elem, index, list) { return $(elem).height(); }); return $(h).height(); }); 
 $.fn.matchHeight = function() { var max = 0; $(this).each(function(i, e) { var height = $(e).height(); max = height > max ? height : max; }); $(this).height(max); }; $('.match-height').matchHeight(); 

Я решил это с помощью настраиваемого плагина jQuery max:

 $.fn.max = function(selector) { return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get() ); } 

Здесь content-box – мой внутренний элемент столбца, content-container – это shell, содержащая столбцы:

 $('.content-box').height(function () { var maxHeight = $(this).closest('.content-container').find('.content-box') .max( function () { return $(this).height(); }); return maxHeight; }) 

Вышеупомянутые решения работают до тех пор, пока вы не добавите красивые кнопки бутстрапа! Как вы позиционируете кнопки, которые я думал (да, это была моя проблема).

Я объединил CSS с ответом jquery: « Как я могу заставить плавающий DIV соответствовать высоте другого плавающего DIV?

После немного frigging я получил это, которое работает с CSS, хотя кнопки не выстраиваются в линию, и отлично с jQuery

Не стесняйтесь исправить строку кнопки CSS вверх 🙂

JQuery:

 $.fn.equalHeights = function (px) { $(this).each(function () { var currentTallest = 0; $(this).children().each(function (i) { if ($(this).height() > currentTallest) { currentTallest = $(this).height(); } }); if (!px && Number.prototype.pxToEm) { currentTallest = currentTallest.pxToEm(); //use ems unless px is specified } // for ie6, set height since min-height isn't supported if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({ 'height': currentTallest }); } $(this).children().css({ 'min-height': currentTallest + 40 // THIS IS A FRIG - works for jquery but doesn't help CSS only }); }); return this; }; $(document).ready(function() { var btnstyle = { position : 'absolute', bottom : '5px', left : '10px' }; $('.btn').css(btnstyle); var colstyle = { marginBottom : '0px', paddingBottom : '0px', backgroundColor : '#fbf' }; $('.col').css(colstyle); $('.row-fluid').equalHeights(); }); 

CSS

 .col { margin-bottom: -99999px; padding-bottom: 99999px; background-color:#ffb; position:relative; } .col-wrap { overflow: hidden; } .btn{ margin-left:10px ; } p:last-child { margin-bottom:20px ; } 

jsfiddle – http://jsfiddle.net/brianlmerritt/k8Bkm/

Вот мое решение с 2 столбцами (приспособить это к большему количеству столбцов, просто добавьте дополнительные условия). Запустите в событии загрузки, чтобы иметь правильную высоту всех элементов.

 $(window).on('load', function () { var left = $('.left'); var leftHeight = left.height(); var right = $('.right'); var rightHeight = right.height(); // Width like mobile, the height calculation is not needed if ($(window).width() <= 751) { if (leftHeight > rightHeight) { right.css({ 'height': 'auto' }); } else { left.css({ 'height': 'auto' }); } return; } if (leftHeight > rightHeight) { right.css({ 'height': leftHeight }); } else { left.css({ 'height': rightHeight }); } }); 
  • Можно ли использовать div как контент для Popover Twitter?
  • Как я могу получить столбец Bootstrap для размещения нескольких строк?
  • Меньше и Bootstrap: как использовать class span3 (или spanX ) как mixin?
  • Использование link_to со встроенным HTML
  • Используйте раскрывающееся меню Bootstrap 3 в качестве контекстного меню
  • Выпадающее меню выпадающего списка Bootstrap отсутствует
  • Центрировать элемент в Bootstrap 4 Navbar
  • Как использовать CKEditor в модуле Bootstrap?
  • Как интегрировать тему Wrap Bootstrap в приложение Rails?
  • Сохранять раскрывающееся окно Bootstrap при нажатии
  • Выпадающие меню Bootstrap появляются за другими элементами - IE7
  • Давайте будем гением компьютера.