Bootstrap 4:使容器列内部的对象延伸到视口边缘 [英] Bootstrap 4: Make an object inside of a container column extend to the viewport edge

问题描述

在任何列中制作div的技巧都可以扩展到右(或左)边吗?我需要坚持使用固定的容器，而不要使用流动的容器.另外，由于有了CMS，扩展块"需要保留在标记中(不能是CSS伪元素).

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.

未回答在容器外部扩展引导行因为此解决方案仅适用于50％50％的拆分.

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

推荐答案

HTML:在具有"extend-me"类的div上，还添加"row"类CSS:要向右扩展内部div，请将margin-left添加到0 .extend-me {margin-left:0;}

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

样本

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

这篇关于Bootstrap 4:使容器列内部的对象延伸到视口边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！