Bootstrap 5 响应式定价表应弃用 table，改用 div+栅格布局，通过 col-12 col-md-6 col-lg-4 控制列数，配合 d-inline-block 防价格断行、focus-within 兜底触摸交互、py-3/text-center 替代 btn-block，并用 h-100+flex-column 实现卡片等高。
用 Bootstrap 5 的栅格系统控制列宽，别硬写媒体查询
bootstrap 自带的响应式定价表不靠 css 媒体查询手动适配，而是靠 col-* 类在不同断点自动换行和重排。关键不是“让表格变响应式”，而是放弃 <table>，改用 <div> + 栅格布局 —— 表格语义不适合定价场景，且 <table> 在小屏上横向滚动体验极差。
常见错误是把价格卡片塞进 <tr><td> 里，结果小屏下内容挤成一列但宽度不变，文字溢出或换行错乱。
- 用
col-12 col-md-6 col-lg-4控制每行显示数量：手机单列、平板双列、桌面三列 - 避免给卡片容器设固定
width或min-width，否则会破坏栅格流式行为 - 如果需要“推荐”标签突出，用
position: absolute配合top: 0; right: 0，别用浮动或 margin 推挤
卡片内价格数字用 display: inline-block 防止小屏断行错位
价格数字（比如 $99）在窄屏下容易被浏览器在符号处断行，变成 “$
99”，视觉割裂。这不是 Bootstrap 的问题，是默认 inline 元素的换行规则。
解决方法简单：把价格封装在 <span> 里，并加 class="d-inline-block"（Bootstrap 5 已内置）。这样整个价格块作为整体参与换行，不会被拆开。
- 别用
white-space: nowrap，它会让内容溢出容器，尤其在超小屏（如 iPhone SE）上 - 如果用了自定义字体，确保数字字符宽度一致，否则
d-inline-block后左右对齐仍可能错位 - 货币符号和数字之间用
hover 效果在触摸设备上失效？用 focus-within 兜底
给定价卡片加 :hover 放大或加阴影很常见，但在 iPad、Android 平板上基本没反应 —— 触摸设备没有 hover 状态。只依赖 hover 就等于放弃半数用户交互反馈。
Bootstrap 5 不提供原生 focus 替代方案，得自己补。最轻量的做法是给卡片容器加 tabindex="0"，再用 :focus-within 捕获键盘焦点（含触摸屏点击后自动获得焦点的行为）。
- 别只写
:hover，必须同时写:focus-within，两者样式保持一致 - 避免给内部按钮加
tabindex却忽略卡片本身，否则焦点无法落到整张卡片上 - 测试时真机点一下，看是否触发焦点边框（若没关
outline），这是判断focus-within是否生效的最快方式
移动端点击区域太小，btn-block 已废弃，改用 py-3 + text-center
Bootstrap 5 移除了 btn-block，但很多人还习惯性加它想让按钮占满宽度。结果在手机上按钮文字被撑开、行高失衡，甚至遮住下方内容。
正确做法是放弃“块级按钮”思维，直接控制内边距和文本对齐：
- 按钮加
py-3（上下 padding）+px-4（左右 padding），保证点击热区 ≥ 44px - 用
text-center居中文字，别依赖btn-block的 width: 100% - 如果按钮文字过长，加
text-wrap（Bootstrap 5.3+）或white-space: normal，防止单字折行
真正麻烦的不是怎么堆 class，而是所有卡片高度要视觉一致 —— 价格描述行数不同、功能列表长度不一，会导致卡片参差不齐。这时候不能靠 JS 计算高度，优先用 h-100 + d-flex flex-column 把内容区域拉伸，再用 flex-grow-1 给描述区分配剩余空间。不然，哪怕 class 全对，一眼看上去还是“不专业”。
