如何在引导程序中的容器内创建 100% 屏幕宽度 div? [英] How to create a 100% screen width div inside a container in bootstrap?

问题描述

假设我有以下标记:

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

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

解决方案

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

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

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

您应该将该 div 拉到容器之外.您要求 div 比其父级拉伸得更宽，这通常是不推荐的做法.

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

.full-width-div {位置:绝对；宽度:100%；左:0；}

你也可以使用fixed而不是absolute，但是当你滚动时它不会移动.

Let's say i have the following markup:

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

Now how to make .full-width-div stretch to the full width of the screen? Because currently it's limited inside the container.

解决方案

2019's answer as this is still actively seen today

You should likely change the .container to .container-fluid, which will cause your container to stretch the entire screen. This will allow any div's inside of it to naturally stretch as wide as they need.

original hack from 2015 that still works in some situations

You should pull that div outside of the container. You're asking a div to stretch wider than its parent, which is generally not recommended practice.

If you cannot pull it out of the div for some reason, you should change the position style with this css:

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

Instead of absolute, you could also use fixed, but then it will not move as you scroll.

这篇关于如何在引导程序中的容器内创建 100% 屏幕宽度 div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！