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

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

你应该把那个div拉到容器外面.你要求div比其父级更宽,这通常不是推荐的做法.

如果由于某种原因无法将其拉出div,则应使用此css更改位置样式:

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

您也可以使用固定,而不是绝对,但滚动时它不会移动.

Answer 2

你应该使用container-fluid,而不是container.请参阅示例:http://www.bootply.com/onAFpJcslS