Html Bootstrap 列全内容背景色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29727995/
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
Bootstrap column full content background-color
提问by Lucas B
This is what I want to do :
这就是我想要做的：
And this is what I have :
这就是我所拥有的：
And this is my code :
这是我的代码：
Html
html
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-6">col-md-6 ...</div>
<div class="col-md-2">col-md-2</div>
</div>
Css
css
.col-md-4,.col-md-2 {
background-color: #e3e3e3;
}
.col-md-6 {
background-color: #f5f3f3;
}
I checked other questions on the subject but I'm not satisfied with the answers... can someone help me to improve my code ? thank you !
我检查了有关该主题的其他问题，但我对答案不满意......有人可以帮助我改进我的代码吗？谢谢你 ！
回答by Benison Sam
Look here in JSFiddle...
I hope you are looking for this output. If yes then try the following code:
在JSFiddle 中查看此处...
我希望您正在寻找此输出。如果是，请尝试以下代码：
HTML:
HTML：
<div class="row">
<div class="col-md-4 row-height">
<span>col-md-4</span>
</div>
<div class="col-md-6 row-height">
col-md-6
</div>
<div class="col-md-2 row-height">
col-md-2
</div>
</div>
And CSS:
和 CSS：
.row {
padding: 100px;
}
.row-height {
height: 70px;
text-align: center;
padding-top: 25px;
}
.col-md-4,.col-md-2 {
background-color: #e3e3e3;
}
.col-md-6 {
background-color: #f5f3f3;
}
.col-md-4 {
border-radius: 15px 0 0 15px;
}
.col-md-2 {
border-radius: 0 15px 15px 0;
}
You can modify the CSS the way you want and sizes in the styles according to the content.
您可以按照您想要的方式修改 CSS，并根据内容调整样式的大小。
Hope this helps...
希望这可以帮助...
回答by Zim
You could color the entire .rowand then the middle column separately..
您可以分别为整个.row列和中间列着色..
.row {
background-color: #e3e3e3;
border-radius: 15px;
}
.col-md-6 {
background-color: #f5f3f3;
}
回答by jeyglo
Try this CSS:
试试这个 CSS：
.row {
display: table;
width: 100%;
}
.col {
display: table-cell;
}
.col-md-4,
.col-md-2 {
background-color: #e3e3e3;
}
.col-md-6 {
background-color: #f5f3f3;
}
回答by Abhishek Patel
Add a custom class say myfixto the column div elements and set height:100%;.
myfix向列 div 元素添加一个自定义类 say并设置height:100%;.
