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

使用 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">

伪示例元素：

对于 Bootstrap 3，您还可以使用伪元素创建所需的效果：

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

以上是如何在保持盒装宽度的同时扩展引导列中的背景颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！