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

没有回答 Extend an element beyond the bootstrap container 因为这个解决方案使用了伪元素。

没有回答 Extend bootstrap row outside the container 因为此解决方案仅适用于 50% 50% 的拆分。

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

Answer 2

试试这个codepen：https://codepen.io/anon/pen/EedrQV

我使用以下 css 调整了容器元素：

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

这会将整个容器向右移动，因此您可能需要根据您希望它们的宽度调整 col-sm 类。

Answer 3

这是一个有效的代码笔：https://codepen.io/migli/pen/QWvqOeM

不使用绝对定位，只使用 css --root 变量和 css 计算：

/* HTML
-------------------------------------------------- */

<div class="container">
    <div class="row">
        <div class="col">
            <h4>This is a column</h4>
        </div>
    </div>
    <div class="col full-width">
        <h4>This column is 100vw</h4>
    </div>
</div>

/* CSS
-------------------------------------------------- */

:root {
    --gutter: 15px;
    --container-width: 100%;
    --full-width-margin: calc(
        (-100vw + var(--container-width)) / 2 - var(--gutter)
    );
}

@media (min-width: 576px) {
    :root {
        --container-width: 540px;
        --full-width-margin: calc(
            (-100vw + var(--container-width)) / 2 - var(--gutter)
        );
    }
}

@media (min-width: 768px) {
    :root {
        --container-width: 720px;
        --full-width-margin: calc(
            (-100vw + var(--container-width)) / 2 - var(--gutter)
        );
    }
}

@media (min-width: 992px) {
    :root {
        --container-width: 960px;
        --full-width-margin: calc(
            (-100vw + var(--container-width)) / 2 - var(--gutter)
        );
    }
}

@media (min-width: 1200px) {
    :root {
        --container-width: 1140px;
        --full-width-margin: calc(
            (-100vw + var(--container-width)) / 2 - var(--gutter)
        );
    }
}

.full-width {
    width: 100vw;
    max-width: none;
    margin-left: var(--full-width-margin);
    margin-right: var(--full-width-margin);
}