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

我已经写了一些标记，为导航栏上的我的网页上，现在我想移动到下一个部分，当我加入另一部分不扩大全宽，我注意到：image here Bootstrap容器不是全宽（屏幕左侧和右侧的空白处）？

我为该部分添加了白色背景，并且身体的背景为黑色。下面是一些标记和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; 
}

我相信我已经离开了所有不相关的信息，但如果我没有漏掉什么重要的是你也需要，请让我知道。

来源

2016-01-14 Chris Hodge

尝试添加容器流体而不是容器。如果还是不行，请创建一个小提琴/ plnkr。我们很容易理解。 –

请提供您的代码（HTML/CSS/JS）的一个最小工作示例，它重现问题中描述的问题。参见[mcve]和[问]。 – vanburen

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

请检查此琴：https://jsfiddle.net/ya6z789x/1/

正如你所看到的第一个container类（简单container）具有1170px一组宽度较大的视口，970像素的略小等（它减少为您减少视尺寸）。第二个示例container-fluid设置为其父级的100％宽度。这意味着如果您的header元素没有定义宽度，container-fluid类将拉伸到窗口的整个宽度。

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

来源

2016-01-14 09:09:25

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

回答

相关问题