Bootstrap列全内容背景颜色

Question

这就是我想要做的:

这就是我所拥有的:

这是我的代码:

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

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

Answer 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;
}

您可以根据内容修改CSS的样式和样式的大小.

希望这可以帮助...

Answer 2

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