Bootstrap 4 50％高度的行/列

Question

我需要在图片上做一个方块

左图块是col-5，右图块是col-7，该行必须有两行，其高度为左图块的50％。

如何制作高度为50％的块？

Answer 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专门设计用于促进这种结构的创建。

Answer 2

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

当我将每个.col包入.row并将这些行的高度设置为50％时，一切都会按预期进行。就像在droduit答案中一样。