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

在这些情况下，我按照每个块的方式设置页面容器：

＆＃13;

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

＆＃13;

<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>

＆＃13;

你不需要.band这样的宽度。

Answer 2

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

像这样：

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

Answer 3

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

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

Bootstrap 3全宽div在容器流体中

3 个答案: