html - Bootstrap 容器不是全宽(屏幕左右两侧的空白区域)？

Question

我已经在我的网页上为导航栏编写了一些标记，现在我正尝试进入下一部分，我注意到当我添加另一个部分时它没有展开整个宽度:image here

我在该部分添加了白色背景，主体的背景为黑色。这是一些标记和 CSS:

HTML 示例:

<header>
    <div class="container">
        <!-- fun markup here -->
    </div>  
</header>
<section id="work">
    <div class="container"></div>
</section>

CSS 示例

section#work {
    padding: 100px 0;
    background-color: white;
}

我相信我已经遗漏了所有不相关的信息，但如果我确实遗漏了您也需要的重要信息，请告诉我。

Answer 1

这里的简单答案是使用container-fluid。

请检查这个 fiddle :https://jsfiddle.net/ya6z789x/1/

如您所见，第一个 container 类(简称 container)在较大的视口(viewport)处设置宽度为 1170px，在稍小的视口(viewport)处设置为 970px 等等(它减少为你减少视口(viewport)大小)。

第二个示例，container-fluid，设置为其父级的 100% 宽度。这意味着如果您的 header 元素没有定义宽度，则 container-fluid 类将拉伸(stretch)到窗口的整个宽度。

或者，如果您的 header 元素的宽度为 900px(第三个示例)，则将 container-fluid 直接作为其子元素放置将使 container-fluid 元素的宽度为 900px。请注意，您可能需要展开 fiddle 的视口(viewport)才能看到实际效果。