使用 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 自动计算。
以下是优化后的完整结构（已精简冗余属性，增强可维护性）：
<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>
