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标记来处理此问题，因为它涵盖整个视口宽度。然后为了模仿左栏中的“半容器”，我创建了.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); }
}

Bootstrap 4容器，一半到达边缘

1 个答案: