Bootstrap 5网格布局求助：代码未实现预期结构

希望实现如下网格结构：

当前编写的Bootstrap 5代码无法达到预期效果，代码如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container ">
  <div class="row ">
    <div class=" col-12 col-md-8 bg-primary ">
      1
    </div>
    <div class=" col-12 col-md-4 ">
      <div class="row ">
        <div class="col-12 bg-info">
          2
        </div>
        <div class="col-12 bg-warning">
          3
        </div>
      </div>
    </div>
  </div>
</div>

问题原因 #

右侧的列没有撑满高度，内部的两个子区块也没有平分右侧的可用空间，导致布局和目标效果不一致。

修复代码 #

只需添加几个Bootstrap内置工具类就能解决：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 bg-primary">
      1
    </div>
    <div class="col-12 col-md-4 h-100">
      <div class="row h-100 flex-column">
        <div class="col-12 bg-info flex-grow-1">
          2
        </div>
        <div class="col-12 bg-warning flex-grow-1">
          3
        </div>
      </div>
    </div>
  </div>
</div>

工具类说明 #

• h-100：让右侧列继承父行的高度，和左侧列保持等高
• flex-column：把右侧内部的行改为垂直方向的弹性容器
• flex-grow-1：让2、3两个区块自动平分右侧列的剩余空间，填满高度

内容的提问来源于stack exchange，提问作者Amer Hamid