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

Posted 2023-03-06

【中文标题】如何在引导程序中的容器内创建 100% 屏幕宽度的 div？ [复制]

【英文标题】：How to create a 100% screen width div inside a container in bootstrap? [duplicate]

【发布时间】：2014-07-25 19:31:30

【问题描述】：

假设我有以下标记：

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

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

【参考方案1】：

2019 年的答案，因为这在今天仍然很活跃

您可能应该将 .container 更改为 .container-fluid，这将导致您的容器拉伸整个屏幕。这将允许其中的任何 div 自然地伸展到所需的宽度。

2015 年的原始 hack 在某些情况下仍然有效

您应该将该 div 拉出容器。您要求 div 比其父级扩展得更宽，这通常是不推荐的做法。

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

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

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

【讨论】：

谢谢，这行得通。但我也必须包括 left:0。

嗨，我试试这个代码，但这对我不起作用，因为我在容器中使用 col-sm-8，如果我使用col-sm-8 中的 div，我希望它在全屏宽度上我的意思是 100% 宽度。

如何保持 div 的高度？它把下面的所有东西都拉起来了..

这一半有效——因为绝对定位，它使元素“远离”DOM（同样适用于“固定”，除了它相对于屏幕位置）。 “相对”也不起作用，因为它相对于父级（即.container，如果不是，则为 .container 的子级） - 不确定这是理想的解决方案..

绝对位置永远不会起作用，因为它不遵循内容的流动。

【参考方案2】：

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

【讨论】：

如果你想让你的页面不被拉伸和类似的东西

【参考方案3】：

你的 full-width-div 不能 100% 拉伸到屏幕的原因是它的父“容器”只占据了大约 80% 的屏幕。

如果你想让它 100% 伸展到屏幕上，要么将“full-width-div”位置固定，或者使用“container-fluid”类而不是“container”。

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