使用twitter bootstrap 2.0 - 如何使相等的列高度？ [英] Using twitter bootstrap 2.0 - How to make equal column heights?

问题描述

引导2.0有任何帮助，使.span1，.span2 .... .span12等高。我嵌套了这种类型的html

Does bootstrap 2.0 have any helpers to make .span1, .span2 .... .span12 equal height. I've nested this type of 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>

如果可能的话，我想让每口井结束相同的高度？

I would like each well to end up the same height if possible?

推荐答案

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

Here's a responsive CSS solution, based on adding a large padding and an equally large negative margin to each column, then wrapping the entire row in in a class with overflow hidden.

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

.col-wrap{  
    overflow: hidden;   
}

您可以看到它在 jsFiddle

编辑

针对某个问题，如果您需要相等的高度井或具有圆角的等高栏，请使用以下变体形式： http：// jsfiddle。 net / panchroma / 4Pyhj /

In response to a question, here's a variation if you need equal height wells or equal height columns with rounded corners: http://jsfiddle.net/panchroma/4Pyhj/

编辑

到一个问题，这里是相同的技术在Bootstrap 3，同样的原则，只是更新在Bootstap网格中的类名称： http： //jsfiddle.net/panchroma/bj4ys/embedded/result/

In response to a question, here's the same technique in Bootstrap 3, same principle, just update the class names in the Bootstap grid: http://jsfiddle.net/panchroma/bj4ys/embedded/result/

这篇关于使用twitter bootstrap 2.0 - 如何使相等的列高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！