使用twitter引导2.0 – 如何使列高度相等？
bootstrap 2.0是否有助手使.span1，.span2 …. .span12等高。 我嵌套这种types的HTML
<div class='container'> <div class='row'> <div class='span2'> <div class='well'> XXXX </div> </div> <div class='span2'> <div class='well'> XXXX XXXX </div> </div> <div class='span2'> <div class='well'> XXXX XXXX XXXX </div> </div> </div> </div> 如果可能的话，我希望每个井都能达到相同的高度？
下面是一个响应式CSS解决scheme，基于每列添加一个大的填充和一个相等大的负边距，然后将整行放在隐藏了溢出的类中。
.col{ margin-bottom: -99999px; padding-bottom: 99999px; background-color:#ffc; } .col-wrap{ overflow: hidden; }
你可以看到它在jsFiddle工作
编辑
在回答一个问题时，如果你需要等高度的井或者圆angular相等的柱子，这里有一个变化： http : //jsfiddle.net/panchroma/4Pyhj/
编辑
在回答一个问题时，Bootstrap 3中的相同技巧，相同的原则，只需更新Bootstap网格中的类名： http : //jsfiddle.net/panchroma/bj4ys/embedded/result/
尝试这样的事情（虽然不是很优雅）：
$('.well').css({ 'height': $('.well').height() });
当select多个元素时，jQuerys height()方法返回最高值。
查看jsFiddle： http : //jsfiddle.net/4HxVT/
jQuery的height（）方法返回“匹配元素集合中的第一个元素”的值。 http://jsfiddle.net/4HxVT/中的答案仅适用，因为行中的第一个元素也是最高的。;
这是另一个基于jQuery的解决scheme：
http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
（通过这个答案： https : //stackoverflow.com/a/526316/518535 ）
扩展已经给出的答案，我刚刚解决了这个使用jQuery和下划线 。 下面的代码片段使得我的井的高度和警报的高度相等，不pipe最高的地方出现在哪里：
$('.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是包含列的包装器：
$('.content-box').height(function () { var maxHeight = $(this).closest('.content-container').find('.content-box') .max( function () { return $(this).height(); }); return maxHeight; })
以上解决scheme都可以工作，直到你添加好的引导button！ 你如何定位我认为的button（是的，这是我的问题）。
我把CSS和jQuery的答案结合在一起如何强制一个浮动DIV匹配另一个浮动DIV的高度？
一些frigging后，我得到了这个，它与CSS工作，虽然button不排队，并与jQuery罚款
随意修复CSSbutton排队位:)
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/
这是我的解决scheme2列（适应这更多的列很简单，只是添加更多的条件）。 在加载事件上运行以获得所有元素的正确高度。
$(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 class="row"> <div class="span4 left"></div> <div class="span8 right"></div> </div>
