在容器流体中引导 3 个全宽 div答案

【问题标题】：Bootstrap 3 full width div's in container-fluid在容器流体中引导 3 个全宽 div
【发布时间】：2018-03-06 21:56:54
【问题描述】：

我正在尝试在 Bootstrap 3 CSS 布局中创建一些“水平带”，扩展到浏览器窗口的整个大小，因此超出了内容类的边距。这是一个 Plunker：http://plnkr.co/edit/6SlNU0ZgFehrBD64r9FG。我发现我可以通过使用container-fluid 类来实现这一点：这意味着该类包含一个 div，包括其他 div，一些代表我的“乐队”，而其他只使用 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 的内部原理，而且我肯定做错了什么，有人可以提出一个解决方案来使“带”全宽吗？

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案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的宽度了。

【讨论】：

这真的很简单！有时我忘记了我可以在容器之外做一些事情！

【解决方案2】：

您可以尝试将100% 替换为auto

像这样：

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

【讨论】：

谢谢，这样做了，我没想到 % 会像 Rodrigo 指出的那样将边框填充和边距相加。

【解决方案3】：

当您使用 % 时，显示将汇总边框、内边距和边距大小。

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

【讨论】：