css - BootStrap - 背景颜色超出容器范围？

Question

我在这里开始使用 Bootstrap ，我希望我的页面将自身限制为 1170 像素，这是容器类标准，但我希望颜色在页面的整个宽度上继续。

我能想到的唯一想法是:

<div class="container-fluid BGtoExtendWholePage headerBG">
    <div class="container">
        <div class="row">
            <div class="col-12">
         Main Body of Page - Header
            </div>
        </div>
    </div>
</div>
<div class="container-fluid BGtoExtendWholePage ContentBG">
    <div class="container">
        <div class="row">
            <div class="col-12">
         Main Body of Page - Main Content
            </div>
        </div>
    </div>
</div>

Answer 1

反对在 Bootstrap 中嵌套容器的争论很大(提示该人发布指向文档的链接，说不要这样做)，但我发现这是可行的。

您将容器嵌套在容器流体中 - 请注意使用 p-0 从内部容器中移除填充。

<div class="container-fluid bg-red mb-3">
    <div class="row">
        <div class="container p-0 mt-6 mb-6">
            ...
        </div>
    </div>
</div>