Bootstrap 4 50% 高的行/列答案

【问题标题】：Bootstrap 4 50%-height rows/colsBootstrap 4 50% 高的行/列
【发布时间】：2019-08-27 10:35:54
【问题描述】：

我需要像图片上那样做一个积木

左块为col-5，右块为col-7，必须有两行，高度为左块的50%。

如何制作 50% 高的积木？

【问题讨论】：

这只能通过 Flexbox 完成。 Example codepen
您可以通过检查其相邻的右侧面板并在加载时指定高度来尝试使用脚本

【解决方案1】：

.row {
  background: #f8f9fa;
}

.col,
.col-5,
.col-7 {
  border: solid 1px #6c757d;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">
    <div class="col-5">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis distinctio at, molestias doloremque optio tempora laudantium facere sequi. Tempore aliquid exercitationem accusamus nulla culpa dolorum rerum consequatur impedit quia porro? Lorem ipsum
      dolor sit amet.
    </div>
    <div class="col-7">
      <div class="row h-50">
        <div class="col">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
      </div>
      <div class="row h-50">
        <div class="col">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem....
        </div>
      </div>
    </div>
  </div>
</div>

您可以这样做，或者使用 Flexbox 而不是 Bootstrap 大小调整实用程序来创建您想要的布局。 Flexbox 专门设计用于促进这种结构的创建。

【讨论】：

【解决方案2】：

我的错误是我在右侧块中设置了 cols 的高度。

当我将每个 .col 包装在一个 .row 中并将这些行的高度设置为 50% 时，一切正常。就像在 droduit 中的回答一样。

【讨论】：