如何在保持盒装宽度的同时扩展引导列中的背景颜色？

使用 Bootstrap 扩展背景颜色

可以使用 Bootstrap 来创建具有不同背景颜色的列的网站。但是，在实现此功能时，必须确保内容保持在定义的引导程序盒装宽度内，尤其是在较大的屏幕上。

Bootstrap 5：

在 Bootstrap 中5、使用绝对定位在具有所需背景的列上的伪元素color:

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

在 Bootstrap 3 中，在第二个容器周围使用额外的包装 DIV：

<div class="container">
<p><strong>伪示例元素：</strong></p>
<p>对于 Bootstrap 3，您还可以使用伪元素创建所需的效果：</p>
<pre class="brush:php;toolbar:false">.right:before {
    right: -999em;
    background: rebeccapurple;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}