twitter-bootstrap - Bootstrap 4 容器有一半到达边缘

Question

我正在尝试实现一个包含两半的 .container。

左半部分通常作为 .col-6，右半部分一直延伸到屏幕的右侧，就好像它是 .col-6 在 .container-fluid 中。

所以，类似于这个...

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p>Curabitur ipsum nisl, volutpat non vulputate in, aliquet id ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin dolor velit, tristique eget leo eu.</p>
      </div>
      <div class="col-md-6"> <!-- this needs to stretch out all the way to the right -->
        <p>Aliquam dapibus consequat diam, a luctus nisi fermentum eu. Proin at enim at dolor convallis vestibulum. Etiam tempor vel enim sed sodales. Vestibulum rhoncus odio felis.</p>
        <p>Sed sodales turpis posuere vel. Proin at scelerisque elit, vitae feugiat lectus. Ut nisl dui, pulvinar at fringilla vitae, bibendum imperdiet mi. </p>
      </div>
    </div>
  </div>
</section>

我希望这是有道理的，提前致谢。

Answer 1

我认为 Bootstrap 4 没有针对此类布局的开箱即用的解决方案，但是它可以通过几个额外的样式集轻松实现。

在下面的解决方案中，我使用顶级 .container-fluid 标签来解决这个问题，因为它覆盖了整个视口(viewport)宽度。然后，为了在左栏中模拟一个“半容器”，我创建了 .container-half 类。这是基于 .container 类，但它的宽度设置为原来的一半。此外，为了演示如何处理响应，我们以 .container-half-md-left 为例。

注意:下面的 css 用作手动制作的媒体查询的示例。在生产中，我将从 scss 编译整个集合。

检查这个CodePen .

HTML

<section>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 px-0" style="background-color: LightCyan;">
                <div class="container container-half container-half-md-left h-100" style="background-color: LightBlue;">
                    <p>Curabitur ipsum nisl, volutpat non vulputate in, aliquet id ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin dolor velit, tristique eget leo eu.</p>
                </div>
            </div>

            <div class="col-md-6" style="background-color: LightSteelBlue;">
                <p>Aliquam dapibus consequat diam, a luctus nisi fermentum eu. Proin at enim at dolor convallis vestibulum. Etiam tempor vel enim sed sodales. Vestibulum rhoncus odio felis.</p>
                <p>Sed sodales turpis posuere vel. Proin at scelerisque elit, vitae feugiat lectus. Ut nisl dui, pulvinar at fringilla vitae, bibendum imperdiet mi. </p>
            </div>
        </div>
    </div>
</section>

CSS

@media (min-width: 576px) {
    .container-half { max-width: calc(540px / 2); }
}

@media (min-width: 768px) {
    .container-half { max-width: calc(720px / 2); }
    .container-half-md-left { margin-right: 0; }
}

@media (min-width: 992px) {
    .container-half { max-width: calc(960px / 2); }
}

@media (min-width: 1200px) {
    .container-half { max-width: calc(1140px / 2); }
}