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

问题描述

假设我有以下标记：

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

现在如何使 .full-width-div 拉伸到屏幕的全宽？因为目前在容器内部是有限的。

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

推荐答案

如果你因为某些原因而无法将其拉出div，那么你应该使用此css更改位置样式：

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;
}

而不是绝对的，你也可以使用fixed，

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

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