css - Twitter Bootstrap - 流体柱上的高度相同

标签 css twitter-bootstrap

是否可以让两个列数据长度不均匀的流体列孔高度相同?

最佳答案

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

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

.col-wrap{  
overflow: hidden;   
}

您可以在 jsFiddle 看到它在工作

编辑

如果您想要等高孔或带圆 Angular 的柱子,则可以使用以下变体:
http://jsfiddle.net/panchroma/4Pyhj/

编辑

另一种具有等高圆 Angular 孔或柱的变体,这次用于 Bootstrap 3
http://jsfiddle.net/panchroma/D4xdE/

它或多或少与 Bootstap 2 相同,但进行了一些改进以适应 BS 现在如何分隔列网格的变化。

关于css - Twitter Bootstrap - 流体柱上的高度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10771713/

相关文章:

html - 将 Bootstrap 中的文本与 FontAwesome 图标旁边对齐

css - Twitter Bootstrap 插入符大小

html - CSS:CSS 样式未应用于链接

css - 自定义字体声明不起作用

javascript - 推特 Bootstrap 中的行流体与行

javascript - 禁用和启用轮播图标不适用于第一张和最后一张幻灯片之间的幻灯片 - Bootstrap

html - 当用户点击 HTML 元素时,如何更改它的颜色?

html - 基于第 n 个子选择器的标题的替代颜色

html - 为什么要用伪元素来分隔 block 元素?

html - 改变 Bootstrap 网格系统