html - 具有 Bootstrap 动态高度的网格？

Question

<分区>

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>

通过添加 d-flex flex-column 使 col 成为 column flexbox 并删除 padding p-0 类 - 使子元素成为 col 类。请参阅下面的演示:

<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 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>
    <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>