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 的 card 是唯一靠谱的 Pricing Table 基础组件
bootstrap 官方早就不提供 pricing-table 专用类了，连文档里都搜不到。现在所有“价格表”都是靠 card + 自定义间距/颜色/排版硬搭出来的。别找 bootstrap-pricing 这类过时插件，它们要么不兼容 v5，要么用一堆冗余 class 搞乱结构。
核心逻辑很简单：每个价格档位是一个 card，横向并列靠 row 和 col 控制栅格，标题、价格、功能列表、按钮各自用语义化标签（h3、h4、ul、btn）包裹。
- 必须用
card-body包住内容主体，否则内边距不统一，价格数字容易贴边 -
card-header适合放“Popular”角标或档位名称，但别塞太多文字——它默认有背景色和 padding，挤不下就溢出 - 价格数字建议用
h2或display-4类，别依赖自定义 font-size，否则在 xs 屏上会撑破col
“高亮推荐项”不是加 border-primary 就完事
常见错误是给某个 card 加个 border-2 border-primary 就以为突出了，结果在深色模式下边框变灰、对比度崩塌，或者在小屏上和其他卡片高度不一致。
真正有效的做法是组合控制：视觉层级 + 空间留白 + 状态感知。
- 加
position-relative，再用top: -1rem微调位置（配合z-index），让推荐卡“浮”出来一点 - 用
shadow-lg替代粗边框，阴影在明/暗模式下都自然 - 务必加
bg-body（v5.3+）或bg-white显式声明背景，否则深色主题下文字直接看不见 - 别只改边框色，同步调整
card-title的text-primary和按钮的btn-primary，保持信号一致
响应式断点一写错，手机上看就是三列叠成一柱
很多人直接套 col-md-4，结果在 iPad mini（768px）上还是三列，文字被压扁；或者用 col-12 col-sm-6 col-md-4 却忘了 row 必须包裹，导致卡片垂直堆叠后间隙失控。
关键不是“几列”，而是“在哪断”。v5 默认断点是 sm:576px、md:768px、lg:992px，而价格表最常翻车的是 768–992px 这个区间。
- 推荐写法：
col-12 col-sm-6 col-lg-4—— 跳过md，避免在 768–991px 之间强行三列 - 如果真要四档价格，
col-12 col-md-6 col-xl-3更稳，xl才到 1200px，留给大屏空间 - 所有
card必须同级放在row内，且row外不能嵌套container-fluid类——它会加负 margin，和 card 的 border 冲突
价格数字里的 $ 和 /mo 别塞进同一个 h2
看似省事，实际埋了可访问性和缩放隐患。屏幕阅读器会把 $29/mo 当成一个词读，用户听不清单位；iOS 缩放字体时，斜杠可能折行，变成“$29
/mo”。
正确拆分能让样式、语义、适配全在线：
- 用
sup包/mo，再加small类控制字号，例如：<h2> <span>$29</span><sup class="small">/mo</sup> </h2> -
$和数字用span分开，方便后续加货币切换逻辑（比如换 € 或 ¥） - 如果支持年付月付切换，把
/mo换成span并加data-unit属性，JS 控制显隐比 DOM 重绘更轻量
细节上最麻烦的其实是价格对齐——不同档位数字位数不同（$9 vs $299），用 text-end 会右偏，用 text-center 又显得松散。稳妥做法是给价格容器设固定 min-width，或者用 text-nowrap + overflow-hidden 配合 text-truncate 防溢出。
