bootstrap 5 中唯一靠谱的 pricing table 基础组件是 card，需配合 row/col 栅格、语义化标签、card-body 统一边距、position-relative+shadow-lg 实现高亮、bg-body 适配深色模式、响应式断点（如 col-12 col-sm-6 col-lg-4）避免堆叠，并规范价格标记（$ 与 /mo 分离）。
Bootstrap 5 没有 pricing-table 组件，也搜不到任何官方文档页——所有“定价表”都是用 card + 栅格 + 语义化标签硬搭出来的。别浪费时间找插件或旧版 panel，直接按标准结构写，反而更稳、更易维护、深色模式兼容性更好。
为什么必须用 card 而不是 table 或 list-group
价格表本质是「功能区块对比」，不是结构化数据集。table 会误导屏幕阅读器，且在小屏上无法自然堆叠；list-group 缺少内边距控制和视觉分隔能力，强行塞价格、按钮、描述后容易错位或文字贴边。而 card 天然支持 card-body 统一边距、card-header 区分标题区、card-footer 固定按钮位置，语义清晰，栅格适配也最顺。
-
card是唯一被 Bootstrap 官方示例和 v5+ 文档实际采用的定价容器 -
list-group在 2026 年已基本退出定价场景——它没有响应式高度拉齐机制，移动端折叠/展开也难控制 - 硬套
table的后果：桌面三列、手机出现横向滚动条，或内容被强制截断
col-12 col-sm-6 col-lg-4 断点组合的实际效果与常见翻车点
这个断点组合对应的是：手机单列 → 平板双列（≥576px）→ 大屏三列（≥992px），跳过了 md（768px），专为避开 iPad mini 竖屏（768px）和部分笔记本（992px）之间的“灰色区间”。很多人写 col-md-4，结果在 768–991px 之间强行三列，文字被压扁、按钮换行、价格数字溢出。
- 必须把所有
card放在同一个row内，且row外不能嵌套container-fluid——它的负 margin 会吃掉card的 border -
col-sm-6在 576px 起生效，但若卡片内容多（比如 6 项功能列表），双列仍显拥挤，此时应降级为col-12 col-md-6，确保中屏也单列 - 四档价格时，
col-12 col-md-6 col-xl-3更稳妥，xl（1200px）才触发四列，留给大屏真实空间
让“推荐”卡片真正突出，而不是只加 border-primary
只加 border-2 border-primary 是典型半吊子做法：深色模式下边框变灰、小屏上卡片高度不一致、与其他卡片视觉层级没拉开。真正有效的高亮是组合策略——靠间距、阴影、背景色、文字色同步调整。
- 给推荐
card加position-relative top:-1rem z-index-1，再配shadow-lg，让它“浮”出来一点，但 DOM 位置不变，不影响栅格流 - 必须显式加
bg-body（v5.3+）或bg-white，否则深色主题下文字直接看不见 -
card-title改用text-primary，按钮用btn-primary，避免只调边框却让标题/按钮还是灰色，信号断裂 - 别用
transform: scale(1.02)—— Safari 下可能错位，且会创建新图层，遮挡下拉菜单
价格数字怎么写才不撑破容器、不破坏语义
把 $49/mo 塞进一个 h2 是最常犯的错：窄屏下斜杠换行、逗号被截断、屏幕阅读器误读为标题。价格是视觉焦点，但不是语义标题。
- 主金额用
span class="display-6 fw-bold"，比h2更专注数字表达，且无语义干扰 - 单位如
/mo单独包一层small class="text-muted"，字号小、颜色浅，不抢 attention - 长价格（如
$9,999.00）要加text-break防止溢出，别依赖white-space: nowrap - 所有价格区块内部必须用
card-body d-flex flex-column h-100，再让按钮用mt-auto吸底——否则内容长短不一，底部永远对不齐
最容易被忽略的是卡片高度一致性：不设 min-height，也不写死 height，而是靠 d-flex flex-column h-100 + flex-grow-1 + mt-auto 这组组合来弹性拉齐。一旦漏掉 h-100 或忘了 flex-column，移动端堆叠时就会出现按钮悬空或文字塌陷。
