具有引导程序高度动态变化的网格？

Question

我想使用Bootstrap 4实现以下布局（图像），但他不会在div 3中的内容上动态调整div 1和2的高度。有人可以帮我吗？

<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col" style="background:yellow;">
      <div class="row">
        <div class="col" style="background:red;">1</div>
      </div>
      <div class="row">
        <div class="col" style="background:white;">2</div>
      </div>
    </div>
    <div class="col" style="background:green;">
      3<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
      no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
      dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

Answer 1

在您的左栏中使用它（请注意标记中的更改）：

<div class="col flex-column d-flex p-0" style="background:yellow;">
  <div class="col" style="background:red;">1</div>
  <div class="col" style="background:white;">2</div>
</div>

通过添加col使d-flex flex-column成为 column flexbox ，并通过padding类删除p-0-使子元素{{1} }类。参见下面的演示：

col