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

您可以尝试用100%替换auto

像这样：

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

Answer 2

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

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上的宽度。

Answer 3

使用％时，显示将对边框，填充和边距大小求和。

您可以在容器中使用box-sizing: border-box;，这将尊重大小并解决超出的大小。