bootstrap 4 响应式价格卡片布局应使用 .col-12 .col-sm-6 .col-lg-4（或 .col-xl-3）逐级断点控制，确保手机单列、平板双列、桌面三或四列；必须嵌套于 .row 内，配合 .container-fluid 和 .h-100 实现等高与对齐，禁用自定义媒体查询破坏栅格。
用 Bootstrap 4 的栅格类控制价格卡片断点布局
Bootstrap 4 的 .col- 系列类（如 .col-12、.col-md-6、.col-lg-4）是响应式价格表的基础，别自己写媒体查询覆盖它们——容易破坏栅格系统对齐。关键在于按设备宽度合理分配列数：手机单列（.col-12），平板双列（.col-sm-6），桌面三列或四列（.col-lg-3 或 .col-xl-3）。
常见错误是只写 .col-md-4 忘了小屏兜底，导致手机上卡片横向溢出。必须从最小断点开始写全：.col-12 .col-sm-6 .col-lg-4 才能逐级生效。
- 避免嵌套
.container内再套.container，价格卡片外层用.container-fluid+ 内层.row更稳妥 -
.col-*类必须放在.row内，否则 margin 负值失效，卡片会错位 - 如果卡片高度不一致，用
.row .h-100+ 卡片内.h-100拉齐，但注意flex布局下子元素需设height: 100%才生效
用 Bootstrap 4 工具类替代自定义 CSS 实现卡片样式
价格卡片的核心视觉（圆角、阴影、边框、内边距）完全可用 .card + 工具类组合实现，不需要额外写 .price-card 类。比如：.card.border-0.rounded-lg.shadow-sm 就比手写 border-radius: 0.3rem; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075); 更轻量且兼容主题变量。
特别注意 .card-body 默认有 padding: 1.25rem，而价格标题常需更紧凑，可直接叠加 .p-0 或 .py-3.px-4 覆盖，别改 .card-body 的全局 padding。
- 价格数字建议用
.display-4.font-weight-bold.text-primary，避免单独设font-size: 3.5rem破坏响应式缩放 - 「推荐」标签常用
.badge.badge-warning.position-absolute，但需配合.position-relative在父卡片上，否则定位脱标 - 按钮统一用
.btn.btn-block.btn-lg，.btn-block在 v4 中仍有效，别误用 v5 的.w-100
解决价格卡片在 Safari 和旧版 Chrome 中的 flex 布局塌陷
当卡片内使用 .d-flex.flex-column.h-100 做等高布局时，Safari 13–14 和 Chrome min-height: 0 的 flex 子项处理不一致。
临时解法是在卡片主体容器加 .flex-fill（等价于 flex: 1 1 auto），并确保其父级有明确高度来源（比如 .h-100 传到 .card）。更稳的方式是放弃全高拉伸，改用 .mt-auto 推按钮到底部。
- 不要给
.card-body设height: calc(100% - Xpx)，CSS calc 在 flex 容器里行为不可靠 - 检查是否误用了
.align-items-stretch—— 卡片本身已是 flex 容器，重复设置可能触发 Safari 的 flex bug - 如果用了
background-image在卡片上，记得加background-size: cover和background-position: center，否则在缩放时图案偏移
让价格强调文本在不同分辨率下保持可读性
价格数字的字体大小必须响应式，但 Bootstrap 4 没有内置 .fs-xxl 这类类名。可行方案是组合 .display-4（font-size: 3.5rem）+ 自定义媒体查询，或直接用 clamp()（仅支持现代浏览器）。
更实际的做法是复用 Bootstrap 的断点变量：在 <style></style> 块中写 .price-amount { font-size: clamp(1.75rem, 4vw, 3.5rem); }。这样手机上最小 1.75rem，桌面最大 3.5rem，中间线性过渡，比纯媒体查询更平滑。
- 避免用
em或rem单独控制价格字号，它会受父级字体影响，导致不同卡片字号不一致 - 货币符号（如 ¥、$）建议和数字同色同大小，不要用
.small缩小，否则在小屏上反而难识别 - 如果价格含小数（如
¥99.90），用<sup>.90</sup>上标时，要加.text-muted并微调vertical-align: top，不然 baseline 对不齐
实际项目里最常被忽略的是卡片阴影在深色背景下的对比度，以及 Safari 下 border-radius 和 overflow: hidden 共同作用时的像素级裁切——这会导致价格角标轻微锯齿。需要手动加 -webkit-mask-image: linear-gradient(transparent, transparent); 来修复，但仅限必要场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
