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

【问题标题】：How can I fill an empty div partitioned using bootstrap grid system with a specific color?如何填充使用具有特定颜色的引导网格系统分区的空 div？
【发布时间】：2016-05-22 03:08:54
【问题描述】：

考虑这种情况

<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%，则不会发生任何事情。为什么会这样？我怎样才能以正确的方式做到这一点？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

使用&nbsp;

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

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

简洁优雅。

【讨论】：

【解决方案2】：

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

按列分类
:first-child 的行按类

Bootstrap 将col-xs- 用于任何宽度的屏幕if there are no other conditions。因此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>

【讨论】：

【解决方案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} 它会起作用的

【讨论】：

实际上，我希望背景为空并用红色填充。但是在这种方法中，只有包含一些内容的行的填充颜色为#FF0000。我该怎么办？
使用高度，给它一个高度：20px 或其他任何东西，它会是红色的，没有内容