css - 使用 Bootstrap Grid 的全高列背景颜色

Question

我知道机会很小，但是您将如何实现如下布局，在使用引导网格系统时，左、中和右具有不同的背景颜色？我猜列布局违背了 Bootstrap 网格的思想，对吗？

在此处输入图像描述

CSS 是用于 span 等的标准 Bootstrap 网格 CSS。

我查看了其他一些 SO Q 和 A，但我不想使用 JavaScript 之类的东西……或者 IE7+ 不支持的东西……

score 6 · Accepted Answer

@Omega 的解决方案看起来不错，这是另一种选择：http: //jsfiddle.net/panchroma/u5XGL/

这里 CSS 的重要一点是如何获取具有不同内容高度的列的背景颜色。

我为每一列添加了一个大的填充和一个同样大的负边距，然后将整行包装在一个隐藏溢出的类中。

CSS

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

.col-wrap{
overflow: hidden; 
}

你会发现它反应很好，也是一个很好的跨浏览器解决方案。

祝你好运！

score 2 · Accepted Answer

当然，只需使用这个 CSS：

html, body, .container-fluid, .row-fluid, .blue, .lightgrey {height:100%;}

2 回答 2