Bootstrap 4容器，一半到边缘

Question

我正在尝试用两个半>实现.container。

左半正常用作.col-6，右半一直延伸到屏幕的右侧，好像它是.container-fluid内部的.col-6。

所以，与此相似...

<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标签对此进行处理，因为这涵盖了整个视口宽度。然后，为了模仿左列中的"半容器"，我创建了.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); }
}