如何用特定颜色填充使用引导网格系统分区的空 div

Question

考虑这种情况

<div class="row">
    <div class="col-md-3 col-sm-3 col-xs-3"></div>
    <div class="col-md-6 col-sm-6 col-xs-6"></div>
    <div class="col-md-3 col-sm-3 col-xs-3"></div>
</div>

在这种情况下，假设我需要用 #FF0000 的背景填充父div 中的第一个div（第一列），我该怎么做？如果我能以常规方式做到这一点，即通过指定 style="background-color：red"，则背景仅针对其中写入的内容而更改。如果我在其中创建另一个div 并将其高度和宽度设置为 100%，则不会发生任何事情。为什么会这样？我怎样才能以正确的方式做到这一点？

Answer 1

使用 

<div class="col-md-3 col-sm-3 col-xs-3">&nbsp;</div>

并根据需要设置背景颜色。

简单而优雅。

Answer 2

空div没有高度。使用height、min-height、padding-top或padding-bottom使空div可见。你可以这样做

1. 按列的类
2. 按类划分的行与:first-child

如果没有其他条件，Bootstrap 对任何宽度的屏幕使用col-xs-。因此col-md-3 col-sm-3 col-xs-3等同于col-xs-3。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.make-first-div-red > div:first-child,
.make-it-red {
  background-color: #f00;
  min-height: 30px;
  margin-bottom: 10px;
) 

<div class="row make-first-div-red">
  <div class="col-xs-3"></div>
  <div class="col-xs-6"></div>
  <div class="col-xs-3"></div>
</div>
<div class="row">
  <div class="col-xs-3 make-it-red"></div>
  <div class="col-xs-6"></div>
  <div class="col-xs-3"></div>
</div>

Answer 3

<div class="row">
    <div class="bg col-md-3 col-sm-3 col-xs-3">adadadadada</div>
    <div class="col-md-6 col-sm-6 col-xs-6"></div>
    <div class="col-md-3 col-sm-3 col-xs-3"></div>
</div>

并使用此 CSS .bg{background:#FF0000}它会工作