Question

我们说我有以下标记：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            ...
            <div class="full-width-div">
            </div>
        </div>
    </div>
</div>

现在如何让.full-width-div伸展到屏幕的整个宽度？因为目前它仅限于容器内。

Answer 1

2019年的答案，因为今天仍然有效

您应该将.container更改为.container-fluid，这会导致容器拉伸整个屏幕。这将允许其中的任何div自然地伸展到他们需要的范围。

2015年的原始黑客在某些情况下仍有效

你应该把那个div拉到容器外面。你要求div比其父级更宽，这通常不建议练习。

如果由于某种原因无法将其拉出div，您应该使用此css更改位置样式：

.full-width-div {
    position: absolute;
    width: 100%;
    left: 0;
}

而不是绝对的，你也可以使用fixed，但是当你滚动时它不会移动。

Answer 2

您应该使用container-fluid，而不是container。请参阅示例：http://www.bootply.com/onAFpJcslS

Answer 3

你的全宽div不能100％伸展到你的屏幕，因为它的父母＆＃34;容器＆＃34;它只占屏幕的80％左右。

如果你想让它100％伸展到屏幕，你可以制作＆＃34; full-width-div＆＃34;固定位置或使用＆＃34;容器 - 流体＆＃34; class而不是＆＃34; container＆＃34;。

请参阅Bootstrap 3文档：http://getbootstrap.com/css/#grid

如何在引导程序中的容器内创建100％屏幕宽度div？

3 个答案: