CSS“突破”Bootstrap行/列，使背景显示整个浏览器的宽度

Question

​

我有一个复杂的Bootstrap-4网格布局。现在，突然在一列中，我需要制作背景(而不是内容！)从浏览器窗口的左边到浏览器窗口的右边，整个宽度。有没有办法做到这一点？

<div class="container">
    <div class="row">
        <div class="col">
            <h2 class="font-weight-light">Hello!</h2>
            <p>
                This background should stay white.
            </p>
        </div>
    </div>
    <div class="row mybackground">
        <div class="col">          
            The red background should fill ALL of the browser-width from left to right, but keep the area above and below with white background.
        </div>
    </div>
</div>

https://jsfiddle.net/enu2vxdw/

如果您看一下小提琴，< div class="mybackground“>的背景应该从左到右到达(左右没有白色填充)，但是它的内容应该保持原样。

您是否知道如何用最少的更改来实现这一点(因为不幸的是，在代码中有很多地方需要这样做，所以一个简单的css-class将是非常棒的)。

Answer 1

现在应该有包含容器的节，而不是在容器中添加行。

举个例子：

​

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <h2 class="font-weight-light">Hello!</h2>
        <p>This background should stay white.</p>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <h2 class="font-weight-light">Hello!</h2>
        <p>This background should stay white.</p>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row bg-danger text-white">
      <!--div class="col"-->
        <div class="container">
          <div class="row">
            <div class="col">
              <p class="mt-3">The red background should fill ALL of the browser-width from left to right, but keep the area above and below with white background.</p>
            </div>
          </div>
       </div>
      <!--/div-->
    </div>
  </div>
</section>

​

container-fluid可以全宽伸展。要对齐内容，您必须再次引入container。你最终会得到相当多的嵌套，看起来不是很漂亮，但我不知道有其他的Bootstrap方法来解决这个问题。

这个结果将完全响应间距。