Question

我在900px宽度的容器中有几个div。

我需要其中一个div来获得完整的浏览器宽度。使用Bootstrap怎么可能？

更新：

小提琴：http://www.bootply.com/vhqRQRPeBH

单击“过滤器组”时，它会在下面的行中过滤选项。我需要将此行灰色背景设置为完整的浏览器宽度，并将按钮保留在容器内，如下图所示：http://imgur.com/M4bJDnK

这是为了使具有过滤器选项的行在每个相应的过滤器组在较小的屏幕中堆叠时显示在下面。

Answer 1

您可以拆分页面...

Bootply ：http://www.bootply.com/PIWtapBtS1

HTML ：

  <div class="container">                        <!-- IN CONTAINER -->
      <div class="row bleu">
        <div class="col-md-6">content</div>
        <div class="col-md-6">content</div>
      </div> 
  </div>                                        <!-- END IN CONTAINER -->
  <div class="col-md-12 rouge">                 <!-- FULL WIDTH -->
        <div class="row">
          <div class="col-md-6">content</div>
          <div class="col-md-6">content</div>
        </div>
  </div>                                        <!-- END FULL WIDTH -->
  <div class="container">                       <!-- IN CONTAINER -->
      <div class="row vert">
        <div class="col-md-6">content</div>
        <div class="col-md-6">content</div>
      </div>
  </div>                                        <!-- END IN CONTAINER -->

Answer 2

我假设你需要这个用于造型目的。 .container应该用作内容包装器，因此您应该将其标记为：

<div class="header">
  <div class="container">
    <!-- your content -->
  </div>
</div>

反过来说不行。

然后在CSS中设置.header：

的样式

.header {
  background-color: #333;
  color: #fff;
}

现在你有一个全角背景。

如果您的内容也需要全宽，则可以使用.container-fluid代替：

<div class="header">
  <div class="container-fluid">
    <!-- your content -->
  </div>
</div>

如果这不能回答你的问题，你应该更好地描述你的情况。

如何在容器内插入全宽div？

2 个答案: