Bootstrap 5卡片堆叠空隙问题根源在于g-类误用、mb-/mt-混用及高度不一致；正确做法是仅对.row使用g-/gy-类控制间距，禁用.card的margin类，统一用h-100+d-flex+mt-auto确保等高与底部对齐。
Bootstrap 5 卡片堆叠时出现“空隙过大”或“视觉错位”，基本不是卡片本身的问题，而是 g- 类用错了位置、混用了 mb-、或没处理好 flex 容器高度一致性。
g-3 为什么在 .row 里没生效
最常见原因是：容器没设 display: flex（但 .row 默认已有），或子元素不是直接 .col —— 比如中间多包了一层 <div>，导致 g- 的 gap 作用在 wrapper 上，而非卡片上。
-
g-3只对.row有效，且只影响其**直接子元素**（即.col-*）之间的间隙 - 如果写成
<div class="row g-3"><div><div class="card"></div></div></div>，gap 实际作用于外层<div>，卡片间距归零 - 正确结构必须是：
<div class="row g-3"><div class="col-12"><div class="card"></div></div></div> - 升级后失效？检查是否误把
.g-3加在了.card或.form-control上——这类元素不支持 gap 工具类
移动端卡片堆叠后上下空隙太大
这不是 g- 太大，而是你给每个 .card 单独加了 mb-3。小屏下多个卡片垂直堆叠，mb-3 触发 margin collapse，实际间距不可控；切到桌面端再叠加 g-3，就突然拉开一倍。
- 立刻停用所有对
.card的mb-/mt-，改用.row.gy-3控制垂直间距（gy-专为列间垂直 gap 设计） - 需要移动端无间隙、桌面端有间隙？写
gy-0 gy-md-3，别用mb-0 mb-md-3 - 若卡片内文字/图标撑不开高度，视觉上“底部悬空”，那是内容留白问题，该调
.card-body的p-4，不是动外部间距
卡片高度不一致导致堆叠参差不齐
g- 只管卡片之间“空隙”，不管卡片本身“多高”。内容少的卡片矮，内容多的卡片高，g-3 的间隙就从矮卡片底部开始算，反而放大了错位感。
立即学习“前端免费学习笔记（深入）”；
- 给每个
.card加h-100，让它拉满父.col高度 - 给
.card-body加d-flex flex-column，让内部内容沿主轴排列 - 把按钮或操作区加
mt-auto，自动钉到底部，不受段落长度影响 - 此时
g-3才真正体现“均匀节奏”，而不是“随机空隙”
暗色模式下卡片间距看着怪，但 g- 值没变
g- 类本身不响应颜色模式，但如果你的卡片用了背景图 + 黑色遮罩（比如 .card-img-overlay），或文字阴影（text-shadow），这些在暗色下可能和间距形成视觉干扰，让人误以为“空隙变大了”。
- 检查遮罩透明度是否在暗色下过低（如
bg-dark bg-opacity-75→ 改为bg-dark bg-opacity-50） - 文字阴影在深背景下易显重，可加媒体查询微调：
@media (prefers-color-scheme: dark) { .card-title { text-shadow: none; } } - 别碰
g-值本身——它只是 gap，数值不变，视觉偏差来自对比度变化
真正容易被忽略的是：卡片堆叠的“节奏感”由两层独立系统控制——g- 管卡片之间，p- 管卡片内部，h-/d-flex 管卡片自身高度行为。混用它们，问题就会在断点切换时集中爆发。
