价格表应使用 .card 而非 .table，因其本质是功能区块对比；推荐版块用 border-primary + mt-n6 + pt-6 实现视觉突出；价格数字需分层并加 text-break；断点推荐 .col-12 .col-sm-6 .col-lg-4；按钮对齐需 flex-column + flex-grow-1。
Bootstrap 价格表用 .card 还是 .table？
别套用表格语义——价格表本质是「功能区块对比」，不是数据表格。用 .table 会破坏可访问性（屏幕阅读器误读为数据集），也难做断点堆叠。Bootstrap 官方示例和实际项目都统一用 .card + .row/.col 布局。关键不是“能不能”，而是“语义对不对、响应逻辑顺不顺”。
实操建议：
- 每个价格方案用一个
.card，外层用.row包裹，子项用.col-md-4或.col-lg-3控制列数 - 移动端默认堆叠（
.col-12），中屏起才分栏，避免小屏横向滚动 - 别给
.card加固定高度——内容长度不一，强行等高会导致文字截断或空白塌陷
怎么让「推荐版块」视觉突出又不破坏栅格？
常见错误是加 position: relative + z-index 硬提层，结果在 Safari 下错位，或导致 .col 内边距计算异常。Bootstrap 5+ 的正确做法是靠间距工具类和边框控制层级感。
实操建议：
- 用
border-primary+border-3强化边框，比阴影更轻量、兼容性更好 - 加
mt-n6（上负边距）让卡片略微上浮，配合pt-6补内边距，视觉上“凸出”但 DOM 位置不变 - 别用
transform: scale()——缩放会触发新图层，可能遮挡下拉菜单或弹窗
价格数字大字体怎么保持换行安全？
.display-4 或 fs-1 在窄屏下极易撑破容器，尤其遇到长数字（如 ¥9,999.00）或货币符号组合。不是字体太大，是没设断行策略。
实操建议：
- 把价格拆成两层：
<span class="h2">¥</span><span class="display-4">999</span>，符号用小字号锚定，数字用大字号但可单独控制 - 对数字部分加
text-break，防止超长无空格字符串溢出（比如带千分位逗号的金额） - 避免用
vw单位写字体大小——iOS Safari 对vw的解析有延迟，初加载时可能闪动
响应式断点怎么选才不踩坑？
很多人直接抄文档的 md、lg，结果在 iPad Pro（1024×1366）这种分辨率上，.col-md-4 依然三栏并排，文字挤成一团。Bootstrap 的断点是基于视口宽度，不是设备类型。
实操建议：
- 用
.col-12 .col-sm-6 .col-lg-4组合：手机竖屏单列 → 平板横屏双列 → 大屏三列，覆盖主流设备 - 如果产品定价差异大（如基础版/企业版/定制版），考虑在
xl断点用.col-xl-3，避免四列太密 - 务必在真机 Safari 和 Chrome DevTools 的 “Device Toolbar” 里切到 768px、1024px、1200px 手动验证，模拟器容易漏掉渲染差异
最常被忽略的是「按钮对齐」——不同卡片内容高度不同，底部 CTA 按钮不在同一水平线。这不是样式问题，是 Flex 布局没封底。得给卡片内容区加 flex-grow-1，再用 d-flex flex-column 控制内部流，否则再多的 margin 调整都是临时补丁。
