使用twitter bootstrap 2.0 - 如何使列高度相等？

Question

bootstrap 2.0是否有任何助手可以使.span1,.span2 ...... .span12等于高度.我已经嵌套了这种类型的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>

如果可能的话,我希望每个井都达到相同的高度？

Answer 1

这是一个响应式CSS解决方案,基于为每列添加大填充和同样大的负边距,然后将整行包装在隐藏溢出的类中.

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

.col-wrap{  
    overflow: hidden;   
}

你可以看到它在jsFiddle工作

编辑

在回答一个问题时,如果你需要相同高度的井或带有圆角的等高柱,这里有一个变化:http://jsfiddle.net/panchroma/4Pyhj/

编辑

在回答一个问题时,这里的Bootstrap 3中的技术相同,原理相同,只需更新Bootstap网格中的类名:http://jsfiddle.net/panchroma/bj4ys/embedded/result/

Answer 2

试试这样的东西(虽然不是很优雅):

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

height()选择多个元素时,jQuerys 方法返回最高值.

请参阅jsFiddle:http: //jsfiddle.net/4HxVT/

Answer 3

jQuery的height()方法返回"匹配元素集合中的第一个元素"的值.http://jsfiddle.net/4HxVT/中的答案只能起作用,因为行中的第一个元素也是最高的.

这是另一个基于jQuery的解决方案:

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

(通过这个答案:https://stackoverflow.com/a/526316/518535)