必须使用 bootstrap 5 的 .card 结构并包裹 .card-body，才能确保 flex 布局、响应式适配、垂直对齐及排版一致性；标题用 .card-title，段落用 .card-text，链接用 .card-link；仪表盘变体应通过组合内置类实现，网格布局须严格遵循 .row/.col 嵌套规则。
卡片结构必须用 .card 而不是自己套 div + 边框阴影
直接写 <div class="shadow rounded p-4"> 看似能模拟卡片，但会丢失 Bootstrap 5 卡片的 flex 布局行为、响应式断点适配能力，以及与 <code>.card-body、.card-header 的垂直对齐逻辑。比如你手动加 display: flex，遇到 .card-img-top 就容易错位；再比如 .card-group 的等高对齐根本不会生效。
正确起点永远是：<div class="card"><div class="card-body">...</div></div>。所有后续样式增强都应在此骨架上叠加，而不是绕开它。
.card 内部必须显式包裹 .card-body 才能保证文字行高和内边距一致
很多人把标题、段落直接塞进 .card 标签里，结果发现字体大小不统一、上下间距松散、移动端文字挤到边缘——这是因为 .card 本身不提供默认内边距或排版重置，.card-body 才是 Bootstrap 5 中唯一被设计为「内容容器」的类。
-
.card-body自带padding: 1rem和flex: 1 1 auto，确保内容撑满可用空间 - 标题要用
.card-title（h5级别）或.card-subtitle，不能只靠font-size硬调 - 段落必须用
.card-text，它会重置margin-bottom并继承.card-body的行高 - 链接需加
.card-link，否则在深色背景卡片里颜色不可读
仪表盘常用变体：头/尾/色块/图标，全靠组合已有类，不用写 CSS
仪表盘卡片不是纯展示，常要带状态标识、操作入口或数据标签。Bootstrap 5 已内置足够组合：
- 头部加统计数字：
<div class="card-header d-flex justify-content-between align-items-center"> <span>用户增长</span><span class="badge bg-success">+12.4%</span> </div> - 底部加按钮组：
<div class="card-footer bg-light py-2"><button class="btn btn-sm btn-outline-primary">查看详情</button></div> - 色块强调：
<div class="card bg-primary text-white"><div class="card-body"><h5 class="card-title">关键指标</h5></div></div>（注意配text-white） - 图标前置：
<div class="card-body"> <i class="bi bi-graph-up me-2"></i><h5 class="card-title d-inline">月度活跃</h5> </div>（需引入 Bootstrap Icons）
响应式网格布局中，.col 必须嵌套在 .row 里，且避免用 width 固定尺寸
仪表盘卡片常按 2×2、3×3 排列，但有人直接给卡片设 width: 300px + float: left，这在小屏下必然溢出或堆叠错乱。
正确做法是信任 Bootstrap 的栅格系统：
- 外层用
<div class="row g-4">（<code>g-4提供列间间隙，比mb-3更可靠） - 每张卡片包在
<div class="col-12 col-md-6 col-xl-4"> 里：手机占满、平板两列、大屏三列 <li>绝对不要给 <code>.card设固定width或max-width，让它自然填充父.col - 如果需要卡片最小高度（如数据卡片对齐），用
min-height: 120px替代height，防止内容多时截断
真正难的不是写对类名，而是克制住“我想微调一点”的冲动——Bootstrap 5 的卡片体系已经过大量设备验证，越少自定义，越稳。
