Question

在任何列中制作div的技巧都可以延伸到右（或左）边缘吗？我需要坚持使用固定的容器，而不要使用流动的容器。另外，由于CMS，“扩展块”需要保留在标记中（不能是CSS伪元素）。

<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

尝试使用此密码笔：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);
}

Bootstrap 4：使容器列内部的对象延伸到视口边缘

3 个答案: