Twitter Bootstrap - 流体柱的高度相同

时间:2012-05-27 04:43:39

标签: css twitter-bootstrap

是否有可能使两个具有不均匀柱数据长度的流体柱孔具有相同的高度?

1 个答案:

答案 0 :(得分:26)

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

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

.col-wrap{  
overflow: hidden;   
}

您可以在jsFiddle

看到它正常工作

编辑

如果您想要相同高度的井或具有圆角的柱子,则为变型:
http://jsfiddle.net/panchroma/4Pyhj/

编辑

具有相同高度井或具有圆角的柱的另一种变体,这次是Bootstrap 3
http://jsfiddle.net/panchroma/D4xdE/

它与Bootstap 2或多或少相同,但有一些改进可以适应BS现在如何对列网格进行空间改变。