在引导容器内制作全宽的 div [英] make div of full width inside of a bootstrap container

问题描述

我已经在一个固定的容器里面，我正在尝试插入一个全宽的视差.

<块引用>

问题:我无法在容器内使其全宽.视差 div 是来自后端的静态块.[所以当我尝试在静态块内自动关闭容器时删除未配对的关闭 div]

我试着让它用相对位置的 div 定位绝对包装它:

<div class="parallax-wrapper">//位置:相对；<div class="parallax-container">//位置:绝对；//视差div和内容在这里

而且这也仅限于容器内.

视觉上，下面我需要制作由绿线表示的全宽视差.

我现在唯一的解决方案是通过 jquery，首先获取文档宽度.并通过从当前容器宽度中减去它并添加剩余宽度并使其固定宽度并让它向左溢出管理边距为负.我认为这不是一个好习惯

解决方案

可以用css实现你描述的jquery解决方案，但是对于IE9+.

.parallax-container{宽度:100vw；margin-left: calc(-50vw + 50%);}.视差容器:之前，.视差容器:后{显示:表；内容: " ";}.视差容器:后{清楚:两者；}

您可以在此处阅读有关 calc() 这里

I am already inside a container of fixed with and i am trying to insert a parallex of full width.

Problem : I couldn't make it of full width as its inside a container. The parallax div is a static block comes form backend. [So as i try to close container inside static block it automatically removes the unpaired closing div]

I tried making it's positing absolute wrapping it with a div of position relative:

<div class="container">
    <div class="parallax-wrapper">          //position: relative;
        <div class="parallax-container">    //position: absolute;
           //parallax div and content here
        </div>
    </div>
</div>

And also this limits within the container only.

Visually, below i need to make the parallax of full width indicated by green lines.

The Only solution i have now is via jquery, first obtaining document width. And by subtracting it form the current container width and adding remaining width and make it fixed width and let it overflow managing margin to left negatively. and i don't think its a good practice

解决方案

You can achieve the jquery solution you described with css, but for IE9 +.

.parallax-container{
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.parallax-container:before,
.parallax-container:after {
    display: table;
    content: " ";
}

.parallax-container:after {
    clear: both;
}

You can read about vw here and about calc() here

这篇关于在引导容器内制作全宽的 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！