在 Bootstrap 流体容器中将 div 背景设为 100%答案

【问题标题】：Make div background 100% in Bootstrap fluid container在 Bootstrap 流体容器中将 div 背景设为 100%
【发布时间】：2016-03-10 05:40:53
【问题描述】：

我在 Bootstrap container-fluid 中有一个 div，如下所示：

<div class="container-fluid">
  <div class="col-md-12 myDiv">
  </div>
</div>

我的 CSS：

.myDiv {
  height: 200px;
  background-color: red;
}

当然，myDiv 的背景不会一直延伸到视图的边缘，因为container-fluid 上面有padding/margin。无论如何要克服这个？

【问题讨论】：

【解决方案1】：

如果您想使用引导元素，请使用row 类，这样它将克服container-fluid 的问题，否则您可以使用自定义类（在我的情况下为.pd_none）。

与行demo

.myDiv {
    height: 200px;
    background-color: red;
}

HTML：

<div class="container-fluid">
    <div class="col-md-12 myDiv row"></div>
</div>

带有自定义class

.myDiv {
  height: 200px;
  background-color: red;
}
.pd_none{padding:0px !important;margin:0px !important;}

HTML：

<div class="container-fluid pd_none">
  <div class="col-md-12 myDiv ">
  </div>
</div>

更多详情请戳link

【讨论】：

【解决方案2】：

您可以简单地覆盖您的 div（覆盖引导程序的 div 不是一个好习惯，但如果需求表明，那么我们需要）

.col-md-12.myDiv{
   margin:0px;
   padding:0;
}

这应该有效。

{默认情况下，在 col 的每一侧添加 15px pad}

【讨论】：

您能解释一下它是如何工作的吗？因为它不起作用。
目前 col-md-12 的类名是 mydiv，所以我只给了 mydiv 的 css。 mydiv 作为 bootstrap 的网格 div 的一部分，默认情况下在其两侧都有 15px 的填充。因此，一旦我们将填充设置为 0，15px 就会被覆盖，并且生成的 div 不会占用那些。
抱歉，如果您尝试使用此代码，您会看到仍有余量意味着它无法正常工作。看这里jsfiddle.net/Leo_the_lion/vqxqw1oq
和题外话：给你一个建议，当你无法理解问题时，请不要发布低答案，因为你的两个答案都不起作用，所以请删除它们。谢谢