Bootstrap 4: Make an object inside of a container column extend to the viewport edge

问题

Any tricks for making a div inside any column be able to extend to the right (or left) edge? I need to stick with a fixed container and not a fluid one. Also, because of the CMS, the "extended block" needs to remain in the markup (can't be a CSS pseudo element ).

https://codepen.io/mwmd/pen/eLPxOX

<div class="container">
  <div class="row">
    <div class="col-sm-7">
      <p>How can I get that div to extend to viewport right while maintaining its left edge to the Bootstrap column?</p>
    </div>
    <div class="col-sm-5">
      <div class="extend-me">
        <img src="https://via.placeholder.com/350x150"/>
      </div>
    </div>
  </div>
</div>

.container {
  background-color: #999;
}
.extend-me {
  background-color: darkred;
  height: 300px;
}
.extend-me img {
  object-fit: cover;
  width: 100%;
  height: 300px;
}

Not answered by Extend an element beyond the bootstrap container because this solution uses a pseudo element.

Not answered by Extend bootstrap row outside the container because this solution only works on a 50% 50% split.

回答1:

HTML: on the div with class "extend-me", also add the class "row" CSS: to extend the inside div to the right, add margin-left to 0 .extend-me { margin-left: 0;}

sample

<div class="container yourOverallContainer">
    <div class="row">
        <div class="col-sm-7">
            <h1> Stack overflow question </h1>
        </div>
    </div>
</div>

<div class="container-fluid">
        <div class="row">
          <div class="col-sm-7 thisToBeAlignedToContainer">
            <p>How can I get that div to extend to viewport right while maintaining its left edge to the Bootstrap column?</p>
          </div>
          <div class="col-sm-5">
            <div class="extend-me row">
              <img src="https://via.placeholder.com/350x150"/>
            </div>
          </div>
        </div>
      </div>


<div class="container">
    <div class="row">
        <footer>
            <p id='feedback'> without jQuery and .container-fluid, yet completely responsive will be interesting... </p>
          </footer>
    </div>
  </div>


.container {
  background-color:#c9efb1;
}

.container-fluid {
  background-color: #fff;
}

.extend-me {
  background-color: darkred;
  height: 300px;
}
.extend-me img {
  object-fit: cover;
  width: 100%;
  height: 300px;
}



mWilson();

    $(window).resize(function(){
        mWilson();
    });

    function mWilson(){
         $('.thisToBeAlignedToContainer').css('padding-left', $('.yourOverallContainer').css('margin-left'));
    }

回答2:

Try this codepen: https://codepen.io/anon/pen/EedrQV

I adjusted the container element using the following css:

.extend-container {
  margin-right: 0;
  margin-left: auto;
}

This moves the entire container to the right, so you may need to adjust the col-sm classes depending on how wide you want them to be.

来源：https://stackoverflow.com/questions/52379042/bootstrap-4-make-an-object-inside-of-a-container-column-extend-to-the-viewport

标签

css

bootstrap-4