在Bootstrap液体容器中使div背景100％

Question

我在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。无论如何要过来？

Answer 1

如果你想使用bootstrap元素然后使用类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

Answer 2

你可以简单地覆盖你的div（不是一个好的做法来覆盖bootstrap的div，但如果需要说的那么我们需要）

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

这将起作用。

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