Bootstrap 4: сделать объект внутри столбца контейнера расширенным до края области просмотра

Question

Какие-нибудь хитрости для того, чтобы сделать div внутри любого столбца, могут быть расширены до правого или левого края? Мне нужно придерживаться фиксированного контейнера, а не жидкого. Кроме того, из-за CMS «расширенный блок» должен оставаться в разметке (не может быть псевдоэлементом 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;
}

Не ответил Расширить элемент за пределы контейнера начальной загрузки потому что это решение использует псевдоэлемент.

Не ответил Расширить строку начальной загрузки за пределы контейнера потому что это решение работает только на 50% 50%.

Answer 1

HTML: в div с классом "extend-me" также добавьте класс "row" CSS: чтобы расширить внутренний div вправо, добавьте margin-left до 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'));
    } 

Answer 2

Попробуйте эту кодовую ручку: https://codepen.io/anon/pen/EedrQV

Я отрегулировал элемент контейнера с помощью следующего css:

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

Это переместит весь контейнер вправо, поэтому вам может потребоваться настроитьклассы col-sm в зависимости от того, насколько широко вы хотите, чтобы они были.