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

问题描述

bootstrap 2.0 是否有帮助使 .span1, .span2 .... .span12 等高.我嵌套了这种类型的 html

<div class='well'>XXX
<div class='well'>XXXXXX
<div class='well'>XXXXXXXXX

如果可能的话，我希望每口井的高度都相同吗?

解决方案

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

.col{底边距:-99999px；填充底部:99999px；背景颜色:#ffc;}.col-wrap{溢出:隐藏；}

你可以看到它在 jsFiddle

编辑

回答一个问题，如果您需要等高的井或带圆角的等高列，这里有一个变体:http://jsfiddle.net/panchroma/4Pyhj/

编辑

回答一个问题，这里是Bootstrap 3中相同的技术，相同的原理，只是更新Bootstap grid中的类名:http://jsfiddle.net/panchroma/bj4ys/embedded/result/

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?

解决方案

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;   
}

You can see it working at jsFiddle

Edit

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/

Edit

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屋！