Bootstrap 列全内容背景色答案

【问题标题】：Bootstrap column full content background-colorBootstrap 列全内容背景色
【发布时间】：2020-01-25 01:42:14
【问题描述】：

这就是我想要做的：

这就是我所拥有的：

这是我的代码：

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

.col-md-4,.col-md-2 {
background-color: #e3e3e3;
}

.col-md-6 {
background-color: #f5f3f3;
}

我检查了有关该主题的其他问题，但我对答案不满意...有人可以帮助我改进我的代码吗？谢谢！

【问题讨论】：

你把那个 coulums 放到一个带有 row 类的 div 中怎么样？
谢谢wijaya，我已经这样做了，但我忘了把它添加到我的问题代码中
将背景颜色添加到.row 怎么样？ jsbin.com/korizi/1/edit?css,output
如果你想用某种颜色填充列背景以填充行的整个高度，请查看stackoverflow.com/questions/19695784/…并将其标记为重复

标签： html css twitter-bootstrap grid

【解决方案1】：

看这里 JSFiddle...

我希望你正在寻找这个输出。如果是，请尝试以下代码：

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>

还有 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;
}

您可以根据内容修改样式中的样式和大小。

希望这会有所帮助...

【讨论】：

【解决方案2】：

您可以为整个.row 着色，然后分别为中间列着色..

.row {
    background-color: #e3e3e3;
    border-radius: 15px;
}

.col-md-6 {
    background-color: #f5f3f3;
}

http://codeply.com/go/FXSkrecwwI

【讨论】：

左栏内容较大时无效。

【解决方案3】：

试试这个 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;
}

【讨论】：

【解决方案4】：

向列 div 元素添加一个自定义类 myfix 并设置 height:100%;。

【讨论】：