如何使用 Bootstrap 创建具有不同背景颜色的全屏两栏布局？

如何创建跨越屏幕边缘的两列不同背景颜色的列

问题：

您希望在网页上创建两列，每列都有不同的背景颜色，延伸到屏幕的边缘。但是，列的内容应保持在 Bootstrap 网格系统的固定宽度内。

解决方案：

使用 Bootstrap 5 Beta：

Bootstrap 中的概念仍然相似5:

• 在列上使用具有绝对位置的伪元素来创建容器流体中容器的错觉。

Bootstrap 5 示例Beta:

<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 5 的替代方案：

• 利用容器流体并在外列中插入较小的网格列，每个网格列带有它的背景颜色。

使用Bootstrap 4：

概念类似于 Bootstrap 5，但没有“-xs-”中缀。

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>

使用引导程序3:

将第二个容器包装在另一个包装器 DIV 中：

<div class="container">
<p><strong>在 Bootstrap 3 中使用伪元素：</strong></p>
<pre class="brush:php;toolbar:false">.right:before {
    right: -999em;
    background: rebeccapurple;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}