Bootstrap无现成价格表组件，必须用card+row+col构建：table会导致小屏溢出和可访问性问题，list-group不支持横向对比与断点分栏；推荐项需position-relative微浮+shadow-lg突出，价格用d-inline-block防断行，按钮用py-3 w-100+focus-within保障触控体验。
Bootstrap 没有“价格表组件”，所谓电商场景下的定价展示，必须用 card + row/col 手动搭——这不是妥协，而是语义和响应逻辑的必然选择。
为什么不能用 table 或 list-group
价格表不是数据表格，也不是垂直功能清单。用 table 会导致小屏横向溢出、可访问性标签错乱（屏幕阅读器读成“第1行第2列”而非“企业版包含API访问”）；用 list-group 虽然能堆叠条目，但无法自然实现横向对比、断点分栏或卡片式高亮，且默认边框间距和 hover 行为与电商定价意图不匹配。
-
table必须套table-responsive才勉强可用，但用户得左右拖动，转化率直接掉 -
list-group的list-group-item是单列流式结构，加flex-wrap强行转行会破坏对齐基准线 - 二者都不支持
col-12 col-sm-6 col-lg-4这类原生断点控制，得额外写媒体查询补丁
card 布局中如何让推荐项真正“跳出来”
只加 border-primary border-3 是无效突出：深色模式下边框灰白难辨，Safari 中 z-index 和 transform 组合常导致遮挡弹窗，且高度不一致时视觉失衡更明显。
- 用
position-relative top: -0.5rem微浮 +shadow-lg，比纯边框更有纵深感，明/暗模式都稳定 - 必须显式加
bg-body（v5.3+）或bg-white，否则深色主题下文字不可读 -
card-title同步用text-primary，按钮用btn-primary，信号链不能断 - 别给整张卡加
scale(1.02)——缩放触发新图层，iOS 上可能盖住下拉菜单
价格数字怎么防断行又保可读性
$999.99/月 在 iPhone SE 宽度下极易被浏览器在 $ 和数字之间、或 / 处错误换行，造成“$
999.99/月”这种割裂效果。这不是字体问题，是 inline 元素默认换行策略。
- 把价格整体包进
<span class="d-inline-block"></span>，强制原子化参与换行 - 符号（
$）、数字（999.99）、单位（/月）拆三段，分别用fs-5 text-muted、display-4 fw-bold、small text-muted控制 - 数字部分加
text-break，防千分位逗号（如$1,234,567）撑破容器 - 禁用
vw写字体大小——iOS Safari 初加载时解析延迟，会闪动
移动端按钮点击区域和交互反馈怎么兜底
依赖 :hover 做悬停放大或阴影，在 iPad 和 Android 平板上完全失效。而 btn-block 已被 Bootstrap 5 移除，硬加会破坏栅格流。
- 卡片容器加
tabindex="0"，再用:focus-within捕获触摸点击后的焦点状态 - 按钮改用
py-3 text-center w-100替代btn-block，确保点击热区足够大 - 测试时真机点一下，看是否有默认 outline 边框出现——这是
focus-within生效的最简验证方式 - 别给按钮设
min-width，窄屏下它会把卡片宽度撑开，破坏col栅格计算
真正难的不是写几行 HTML，而是每张 card 内部的 flex 垂直对齐、每处断点在 768–992px 区间的行为验证、以及深色模式下所有颜色工具类的实际渲染结果——这些细节不跑真机、不切视口宽度，光看文档根本发现不了。
