Twitter Bootstrap - 流柱高度相同 [英] Twitter Bootstrap - Same heights on fluid columns

问题描述

是否可能使两个具有不同列数据长度的流体柱井具有相同的高度？

Is it possible to get two fluid column wells with uneven column data length to be the same height?

推荐答案

这里是一个响应式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/

A variation if you want equal height wells or columns with rounded corners:
http://jsfiddle.net/panchroma/4Pyhj/

EDIT

另一种变体是高度相同的孔或圆角，这次是Bootstrap 3 < br>
http://jsfiddle.net/panchroma/D4xdE/

Another variation with equal height wells or columns with rounded corners, this time for Bootstrap 3
http://jsfiddle.net/panchroma/D4xdE/

它或多或少与Bootstap 2相同，但有一些细化，以适应如何BS现在空间列的网格的变化。

It's more or less the same as with Bootstap 2, but with some refinements to accomodate a change in how BS spaces the column grids now.

这篇关于Twitter Bootstrap - 流柱高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！