使用 Bootstrap 5.3 的 Flex 工具类（d-flex flex-column + flex-fill）可让左右两列卡片高度自动对齐，同时在垂直堆叠的卡片间添加可控间距，无需固定高度或 JavaScript。

使用 bootstrap 5.3 的 flex 工具类（`d-flex flex-column` + `flex-fill`）可让左右两列卡片高度自动对齐，同时在垂直堆叠的卡片间添加可控间距，无需固定高度或 javascript。

在 Bootstrap 5.3 中实现「左侧双卡垂直堆叠、右侧单卡等高并列」的响应式布局，关键在于放弃基于 h-50 的静态高度控制，转而利用 CSS Flexbox 的弹性分配能力——这不仅能适配动态内容高度变化，还能天然兼容响应式断点。

✅ 正确实现方式

将左侧容纳两张卡片的列容器设为 d-flex flex-column，再为每张卡片添加 flex-fill 类，使其均分父容器可用高度；通过 mb-2（或 mt-2）在两张卡片之间创建 2px 间距（由 Bootstrap 的 gutter 系统统一管理）。注意：此时应移除 h-50 / h-100 等固定高度类，交由 Flex 自动计算。

以下是优化后的完整结构（已精简冗余属性，增强可维护性）：

Bootstrap

Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。

下载

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><div class="row g-2 mb-2">
  <!-- 左侧：垂直堆叠的两张卡片（自动等高 + 2px 间距） -->
  <div class="col-xl-3 col-lg-6 col-sm-6 d-flex flex-column">
    <div class="card text-bg-warning flex-fill mb-2">
      <div class="card-header">
        <strong class="text-uppercase">Vertical card 1</strong>
      </div>
      <div class="card-body">
        内容高度自适应，无需预设高度。
      </div>
    </div>
    <div class="card text-bg-info flex-fill">
      <div class="card-header">
        <strong class="text-uppercase">Vertical card 2</strong>
      </div>
      <div class="card-body">
        与上方卡片共享列高，间距由 mb-2 精确控制。
      </div>
    </div>
  </div>

  <!-- 右侧：四分之一宽度卡片（自动拉伸至同高） -->
  <div class="col-xl-3 col-lg-6 col-sm-6">
    <div class="card h-100 text-bg-danger mb-2">
      <div class="card-header">
        <strong class="text-uppercase">Quarter-width card</strong>
      </div>
      <div class="card-body">
        高度随左侧 flex 容器动态匹配，内容可自由伸缩。
      </div>
    </div>
  </div>

  <!-- 底部横跨：半宽卡片 -->
  <div class="col-xl-6 col-lg-12">
    <div class="card h-100 text-bg-success mb-2">
      <div class="card-header">
        <strong class="text-uppercase">Half-width card</strong>
      </div>
      <div class="card-body"></div>
    </div>
  </div>
</div>

<!-- 全宽卡片（独立行） -->
<div class="row">
  <div class="col-md-12">
    <div class="card text-bg-primary mb-2">
      <div class="card-header">
        <strong class="text-uppercase">Full-width card</strong>
      </div>
      <div class="card-body"></div>
    </div>
  </div>
</div>

⚠️ 注意事项

• *勿混用 `h-与flex-fill**：h-50` 会强制限制高度，破坏 Flex 均分逻辑；仅在明确需固定比例（如非响应场景）时使用。
• 间距一致性：所有卡片统一使用 mb-2（而非部分用 mt-2），配合 g-2 行级间隙，确保视觉节奏统一。
• 响应式健壮性：col-xl-3 / col-lg-6 等断点组合已覆盖主流设备，小屏下双卡自动堆叠为单列，无需额外媒体查询。
• 无障碍友好：语义化结构（<div class="card">）和清晰标题层级，天然支持屏幕阅读器。<p>该方案完全基于 Bootstrap 原生工具类，零 JS 依赖，轻量、可预测、易扩展——是构建现代响应式仪表盘或内容看板的理想实践。</p> </div>