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。

请检查这个小提琴：https://jsfiddle.net/ya6z789x/1/

正如您所看到的，第一个container类（简称为container）在较大视口处的设置宽度为1170px，略小于970px，等等（随着视口大小的减小，它会减小）。

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

或者，如果您的header元素的宽度为900px（第三个示例），则直接将container-fluid作为其子元素将使container-fluid元素的宽度为900px。请注意，您可能需要展开小提琴的视口才能看到这一点。

Bootstrap容器不是全宽（屏幕左侧和右侧的空白区域）？

1 个答案: