Bootstrap 5.2三卡片等高问题：单卡列与双列卡底部对齐需求

核心问题是布局结构错误，右列的两张卡片必须放在同一个列容器内，结合Bootstrap的flex类和高度类就能实现对齐，具体操作如下：

1. 修正布局结构
   确保Row下只有两个列：左列放置Students卡片，右列用一个垂直flex容器包裹Tests和Questions两张卡片。这样右列的高度会自动适配两张卡片的总高度，同时Bootstrap的Row默认是flex布局，会让左右两列自动等高。

2. 设置左列卡片高度
   给左列的卡片添加h-100类，让它填满左列的高度，从而和右列底部对齐。

完整代码示例：

<div class="row">
  <!-- 左列：单张卡片 -->
  <div class="col-md-6">
    <div class="card h-100">
      <div class="card-header">Students</div>
      <div class="card-body">
        <!-- 这里放Students卡片的内容 -->
      </div>
    </div>
  </div>

  <!-- 右列：两张垂直排列的卡片 -->
  <div class="col-md-6">
    <div class="d-flex flex-column gap-3">
      <div class="card">
        <div class="card-header">Tests</div>
        <div class="card-body">
          <!-- 这里放Tests卡片的内容 -->
        </div>
      </div>
      <div class="card">
        <div class="card-header">Questions</div>
        <div class="card-body">
          <!-- 这里放Questions卡片的内容 -->
        </div>
      </div>
    </div>
  </div>
</div>

关键说明 #

• d-flex flex-column让右列内的两张卡片垂直排列，容器高度会自动撑满两张卡片的总高度；
• 左列卡片加h-100就能填满等高列的高度，自然和右列最后一张卡片底部对齐；
• gap-3用来控制两张卡片之间的间距，可根据需求调整数值（比如gap-2、gap-4）。

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