Bootstrap 3全宽div在容器流体中

Question

我试图在Bootstrap 3 CSS布局中创建一些"水平带",扩展到浏览器窗口的整个大小,因此超出了内容类边距.这是一个Plunker:http://plnkr.co/edit/6SlNU0ZgFehrBD64r9FG .我发现我可以通过使用一个container-fluid类来完成这个:这意味着有一个包含其他div的类的div,一些代表我的"band",另一些只是使用container该类.因此,我的相关CSS是:

div.band {
  width: 100% !important;
  background-color: #D7EAD8;
  color: #323F3F;
}

和我的HTML:

<div class="container-fluid">
  <div class="row band">Hello band</div>
  <div class="container">
    <div class="row">...</div>
  </div>
  <div class="row band">Another band</div>
  <div class="container">
  <div class="row">...</div>
  </div>
</div>

然而,这并没有完全奏效,因为我在"乐队"div的右边缘不断获得一些白色边缘.我不知道Bootstrap的内部结构,当然我做错了什么,有没有人可以建议一个解决方案来使"带"全宽？

Answer 1

在这些情况下,我以每块方式设置页面容器,如下所示:

div.band {
  background-color: #D7EAD8;
  color: #323F3F;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="band">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        Column content here
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        Regular usage of Bootstrap
      </div>
    </div>
  </div>

您不需要.band以这种方式打开宽度.