<分区>
假设我有以下标记:
<div class="container">
<div class="row">
<div class="col-md-12">
...
<div class="full-width-div">
</div>
</div>
</div>
</div>
现在如何让 .full-width-div 拉伸(stretch)到屏幕的全宽？因为目前它仅限于容器内。
最佳答案
2019 年的答案，因为今天仍然很活跃
您应该将 .container 更改为 .container-fluid，这将导致您的容器拉伸(stretch)整个屏幕。这将允许其中的任何 div 自然地拉伸(stretch)到它们需要的宽度。
2015 年的原始 hack 在某些情况下仍然有效
您应该将该 div 拉出容器。您要求 div 拉伸(stretch)得比其父级更宽，这通常不是推荐的做法。
如果由于某种原因不能将其从 div 中拉出，则应使用此 css 更改位置样式:
.full-width-div {
position: absolute;
width: 100%;
left: 0;
}
除了absolute，你也可以使用fixed，但它不会随着你的滚动而移动。
关于html - 如何在 Bootstrap 的容器内创建一个 100% 屏幕宽度的 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24049467/