twitter-bootstrap 带有 Bootstrap 网格的全高列背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15852057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full height Column background color with Bootstrap Grid
提问by George Katsanos
I know the chances are slim, but how would you achieve layouts like the following, where left, center and right have different background colors while using the bootstrap grid system? I guess the column layout is against the thinking of the Bootstrap grid, am I right?
我知道机会很小，但是您将如何实现如下布局，其中左、中和右在使用引导网格系统时具有不同的背景颜色？我猜列布局与 Bootstrap 网格的想法背道而驰，对吗？
Here's an online use case url.
The CSS is the standard Bootstrap grid CSS for spans etc..
CSS 是用于跨度等的标准 Bootstrap 网格 CSS。
I had a look on some other SO Q and A's but I wouldn't like to use things like JavaScript.. or things not supported by IE7+..
我查看了其他一些 SO Q 和 A，但我不想使用诸如 JavaScript 之类的东西……或 IE7+ 不支持的东西……
采纳答案by Omega
Sure, just use this CSS:
当然，只需使用此 CSS：
html, body, .container-fluid, .row-fluid, .blue, .lightgrey {height:100%;}
回答by David Taiaroa
The solution from @Omega looks good, here's another option: http://jsfiddle.net/panchroma/u5XGL/
@Omega 的解决方案看起来不错，这是另一种选择：http: //jsfiddle.net/panchroma/u5XGL/
The important bit of the CSS here is how to get the background colours for columns with varying content height.
这里 CSS 的重要一点是如何获取具有不同内容高度的列的背景颜色。
I've added a large padding and an equally large negative margin to each column, then wrapped the entire row in in a class with overflow hidden.
我为每一列添加了一个大的填充和一个同样大的负边距，然后将整行包裹在一个隐藏溢出的类中。
CSS
CSS
.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#ffc;
}
.col-wrap{
overflow: hidden;
}
You will find that it resoponds well and is also a good cross-browser solution.
你会发现它反应良好，也是一个很好的跨浏览器解决方案。
Good luck!
祝你好运！
