Bootstrap 5中应使用row/col栅格搭配card组件构建响应式价格对比表，禁用table；通过h-100、d-flex flex-column和list-group-flush实现功能项等高对齐；推荐档位用position-absolute角标避免破坏栅格。
用 Bootstrap 5 的栅格 + 灵活工具类做基础结构
bootstrap 5 默认不带“价格对比表”这种预制组件，得靠 row 和 col 搭配 text-center、bg-light 等工具类手动拼。关键是别用 table 标签——它在小屏上横向滚动或错位，破坏体验。
推荐结构：外层 row 包含多个 col（比如 col-md-4），每个 col 内是独立卡片（card），顶部用 card-header 标明档位，主体用 card-body 列功能项，底部放按钮和价格。
- 移动端默认单列（
col-12），平板开始三列（col-sm-6 col-md-4） - 卡片高度要一致，加
h-100到每个card上，否则错落不齐 - 价格数字建议用
display-6或fw-bold强调，单位（如/mo）用small轻量显示
让“对比项”在不同断点下自动对齐
用户常卡在“功能列表怎么对齐”——小屏时文字长导致行高不一，对比失效。解决办法不是硬设 min-height，而是用 Flex 工具类约束内容流。
在 card-body 内部，把功能项包进 list-group list-group-flush，每项用 list-group-item；再给整个 list-group 加 d-flex flex-column h-100，让所有项目等高拉伸。
- 禁用
list-group-item的默认边框（加border-0），避免视觉干扰 - 关键功能前加图标（如
），用text-success标记支持项，text-muted标记不支持（如） - 避免在
list-group-item里嵌套复杂布局，否则 Flex 容易塌陷
突出推荐档位并防止响应式错位
很多方案在 col-md-4 基础上直接加 border-primary 或 shadow，结果小屏时“推荐”卡片宽度变窄，阴影溢出容器，看起来像破掉的边框。
正确做法是用 position-relative 包住卡片，内部用 position-absolute top-0 start-50 translate-middle 放一个“推荐”角标，这样它始终贴在左上角，不占文档流，不影响栅格计算。
- 角标文案用
badge bg-primary text-white px-3 py-1，字体稍小（fs-xs需自定义或用small） - 不要给推荐卡片额外加
col类（比如col-md-5），会打破栅格平衡，导致其他卡片换行 - 如果要用阴影强调，只加
shadow-sm，shadow-lg在移动端太重，模糊焦点
兼容旧版 Bootstrap 4 的注意事项
如果你项目还在用 Bootstrap 4，col 类名一样，但工具类有差异：没有 text-success 这种语义色，得用 text-success（4.x 中是 text-success）；translate-middle 在 4.x 里不存在，得手写 transform: translate(-50%, -50%) 或改用 top: 0; left: 50%。
- 4.x 的
list-group-flush不支持flex-column拉伸，得用h-100+min-height配合 JS 动态同步高度（不推荐）或改用table模拟（仅限简单场景） - 4.x 默认无
display-6，可用h2+mb-0替代价格字号 - 图标库：4.x 常用 Font Awesome，5.x 默认用 Bootstrap Icons，路径和 class 名不同，别混用
真正麻烦的不是写法，而是“对比表”隐含的语义一致性——比如所有卡片的“功能项顺序必须完全相同”，漏一项或调换位置，用户一眼就看懵。这点没法靠 CSS 解决，得靠开发和产品提前对齐清单。
