正确控制Card间距应使用g-而非mb-，g-基于CSS gap作用于.row容器，避免margin合并与叠加；内部留白用p-，高度不一致时需h-100+d-flex+mt-auto对齐；暗色模式下需同步调整遮罩与文字阴影。
Card 之间用 g-* 控制间距，别碰 mb-*
移动端 Card 堆叠时出现“空隙过大”，往往不是 Card 自身问题，而是混用了 mb-3 和 g-3。Bootstrap 5+ 的 g-* 是基于 CSS gap 的响应式栅格间距工具，它作用于 .row 容器，统一控制所有子 Card 的水平与垂直间隙，且在断点切换时自动继承、不叠加。
常见错误是给每个 .card 单独加 mb-3：小屏下多个 Card 堆叠，mb-3 会触发 margin 合并（collapsing），实际间距不可控；更糟的是，一旦切到桌面端启用 g-3，两者叠加导致卡片突然拉开一大截。
- 正确写法：
<div class="row g-3"><div class="col-12"><div class="card">...</div></div></div> -
g-3在移动端等效于gap: 1rem，无需额外媒体查询 - 若需移动端无间隙、桌面端恢复，默认用
g-0 g-md-3 - 避免对
.card直接设margin—— 它会干扰g-*的计算逻辑，尤其在 flex/grid 容器中
Card 内部留白用 p-*，和外部 g-* 解耦
卡片内容挤在一起？别调 .card 的 margin，那是布局层的事。真正该动的是内部 padding：标题、正文、按钮之间的呼吸感，全靠 .card-body 或 .card-header 上的 p-3、py-4 这类类控制。
注意两点：一是 p-* 作用在内容容器上，不影响栅格系统；二是它和 g-* 完全独立——你可以让卡片之间紧贴（g-0），但每张卡内部依然宽松（p-4），反之亦然。
-
.card-body { padding: 1.5rem; }→ 对应p-4（默认 $spacer = 1rem） - 小屏文字缩小时，
p-3 p-sm-4比单写p-4更稳妥 - 不要给
.card加padding—— 它会撑开整体尺寸，破坏h-100或max-width约束
卡片高度不一致时，g-* 仍能保持视觉节奏
当 Card 内容长度不同（比如有的带长段落、有的只有标题），单纯靠 g-3 会让底部对齐错乱，看起来“参差不齐”。这时必须配合 h-100 + d-flex flex-column 强制等高，再用 mt-auto 把按钮“钉”在底部。
关键点在于：g-* 只管卡片之间的空隙，不管卡片内部结构。如果没加 h-100，g-3 的间隙会从最短 Card 的底部开始算起，视觉上反而放大了差异。
- 每个
.card加h-100，确保高度拉满父容器 -
.card-body改为d-flex flex-column，正文占满剩余空间 - 按钮加
mt-auto，自动贴底，不受内容长度影响 - 此时
g-3才真正体现“均匀节奏”，而不是“随机空隙”
暗色模式下，g-* 间距值不变，但遮罩与文字对比需同步调
g-* 类本身不响应颜色模式，但如果你的 Card 带背景图 + 遮罩（如 .card::before），小屏下因间距压缩、文字缩小，遮罩色和 text-shadow 若没随模式调整，会导致文字可读性骤降。
例如：浅色模式下 rgba(0,0,0,0.4) 配 text-shadow: 1px 1px 2px rgba(0,0,0,0.6) 刚好；到了暗色模式，同一遮罩色会发灰，文字阴影变弱，小屏一缩就糊成一片。
- 用
@media (prefers-color-scheme: dark)调整遮罩透明度：rgba(255,255,255,0.15) - 同步收紧
text-shadow模糊半径：1px 1px 1px替代2px - 避免只改字体色——小屏字号降到 14px 时，纯色文字对比度会崩，必须靠描边兜底
g-3，而是搞清哪层该管间距、哪层该管留白、哪层该管层级。漏掉 position: relative，遮罩就盖不住文字；忘了 h-100，g-* 就只是个摆设；没配暗色模式的 text-shadow，移动端一换主题，字就消失。 
