如何使用 Bootstrap 盒装内容创建两个全屏背景列？

获得两列具有不同背景颜色并延伸到屏幕边缘的

理解问题

目标是创建具有两列的网页布局，两列具有不同的背景颜色，延伸到屏幕边缘，同时确保列中的内容保留在定义的引导程序盒内

Bootstrap 3 解决方案

Bootstrap 3 中推荐的方法是在第二个容器周围使用另一个包装器 DIV。这允许第二个容器继承最外层包装器的宽度，而包装器的背景颜色可以延伸到屏幕边缘。

<div class="container">

Bootstrap 4 和 5 解决方案

在 Bootstrap 4 和 5 中，首选方法是使用容器流体类以及在外列中嵌套较小的网格列来实现

<!-- Bootstrap 5 -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-info">
      <div class="row justify-content-end">
        <div class="col-9">...</div>
      </div>
    </div>
    <div class="col-6 bg-danger">
      <div class="row justify-content-start">
        <div class="col-9">...</div>
      </div>
    </div>
  </div>
</div>
<!-- Bootstrap 4 -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-info">
      <div class="row justify-content-end">
        <div class="col-9">...</div>
      </div>
    </div>
    <div class="col-6 bg-danger">
      <div class="row justify-content-start">
        <div class="col-9">...</div>
      </div>
    </div>
  </div>
</div>

附加选项

实现类似效果的另一种方法是使用伪元素，例如 .right:before 来创建彩色背景的外观超出容器宽度。

.right:before {
  right: -999em;
  background: rebeccapurple;
  content: '';
  display: block;
  position: absolute;
  width: 999em;
  top: 0;
  bottom: 0;
}

此方法也可以应用于 Bootstrap 3以及更高版本。

以上是如何使用 Bootstrap 盒装内容创建两个全屏背景列？的详细内容。更多信息请关注PHP中文网其他相关文章！