【问题标题】:How to create a 100% screen width div inside a container in bootstrap? [duplicate]如何在引导程序中的容器内创建 100% 屏幕宽度的 div? [复制]
【发布时间】: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 拉伸到屏幕的整个宽度?因为目前它被限制在容器内。

【问题讨论】:

    标签: html css twitter-bootstrap twitter-bootstrap-3


    【解决方案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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2022-12-14
      • 2019-07-18
      • 2020-02-20
      • 2018-01-04
      • 2015-05-09
      • 2015-07-19
      • 1970-01-01
      相关资源
      最近更新 更多