带有引导程序的网格动态高度？ [复制]答案

【问题标题】：Grid with bootstrap dynamically height? [duplicate]带有引导程序的网格动态高度？ [复制]
【发布时间】：2019-03-01 00:19:50
【问题描述】：

我想用 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>

【问题讨论】：

标签： html css flexbox bootstrap-4

【解决方案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 并通过p-0 类删除padding 使col 成为列弹性框 - 使子元素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>

【讨论】：

这就是解决方案，谢谢