make div of full width inside of a bootstrap container

问题

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

回答1:

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

回答2:

I had a similar approach however I needed an element that would expand full width that was inside of a container + column.

I wasn't able to move my whole DOM structure around because I had a floating sticky sidebar I needed to account for which calculates its place on the page based on offsets of the right sidebar relative to the top/bottom of my page.

I came up with an alternative solution which should help if you have this similar structure:

<div class="bg-light">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-8">
        <div class="row">
          <div class="col-12">
            <div class="full-width">
              <nav class="nav">
                [..z-index above pseudo element]
              </nav>
              [...bg light]
            </div>
          </div>
          <div class="col-12">
            <div class="full-width">
              [...make full width with white bg via pseudo element]
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 col-lg-8">
        [...sticky sidebar]
      </div>
    </div>
  </div>
</div>

SCSS

.full-width {
  position: relative;

  .nav {
    position: relative;
    z-index: 1;
  }

  &:after {
    content: '';
    background-color: white;
    position: absolute;
    left: -999em;
    right: -999em;
    top: 0;
    bottom: 0;
  }
}

来源：https://stackoverflow.com/questions/26838570/make-div-of-full-width-inside-of-a-bootstrap-container