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

Question

有什么技巧可以使任何列内的 div 能够延伸到右(或左)边缘？我需要坚持使用固定容器而不是流动容器。此外，由于 CMS，“扩展 block ”需要保留在标记中(不能是 CSS 伪元素)。

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.

Answer 1

HTML:在类为“extend-me”的 div 上，也添加类“row”CSS:将内部 div 向右扩展，将 margin-left 添加到 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'));
    }