根本原因是默认col未清除浮动且未统一卡片高度；需用row g-3、col-12 col-md-4、h-100、position-relative锚定标签、语义化标题+mb-0控制价格、list-unstyled+m-0+p-0布局列表、w-100按钮、shadow替代border、手动调整header/footer内边距。
为什么直接用 Bootstrap 的 col-* 堆叠后错位？
常见现象是三张价格卡片在桌面端横排正常，但到移动端本该垂直堆叠时出现左右偏移、高度不齐、边框断裂——根本原因是默认的 col 未清除浮动且未统一卡片高度。bootstrap 5+ 已弃用 clearfix 类自动注入，需手动控制容器流式行为。
实操建议：
- 外层用
<div class="row g-3">（<code>g-3提供响应式间距，比mb-3更可靠） - 每张卡片包裹在
<div class="col-12 col-md-4"> 内，**必须显式声明 <code>col-12**，否则小屏下可能继承父级默认宽度导致错行 - 卡片自身加
h-100类，强制等高；若内容长度差异大，再配合d-flex flex-column让内部元素（如按钮）能自动撑底 - 用
<div class="position-relative"> 包裹整个卡片，作为绝对定位的锚点 <li>推荐标签写成：<code><span class="position-absolute top-0 start-50 translate-middle badge bg-warning">推荐</span>，其中start-50 translate-middle比left-0更稳定 - 若需在移动端隐藏该标签，加
d-none d-md-inline-block，**不能只写d-md-block**，否则小屏仍会渲染占位 - 价格数字用
<h4 class="mb-0"> <span class="fw-bold">$99</span><small class="text-muted">/月</small> </h4>，避免fs-*系列类，改用语义化标题层级 +mb-0控制间距 - 功能列表用
<ul class="list-unstyled m-0 p-0"></ul>，每项<li class="mb-1">，这样mb-1在小屏下自动压缩，比固定margin-bottom: 0.5rem更适应断点 - “立即购买”按钮统一用
btn btn-primary w-100，w-100在col-12下生效，在col-md-4下也不影响宽度，无需额外断点类 - 去掉卡片自身的
border，改用shadow-sm或shadow模拟立体感，阴影在不同断点下自动缩放 - 若必须用边框，把外层
row改为<div class="row gx-0">，再给每个 <code>col加border和border-end（除最后一项），用border-end-0 border-md-end控制断点逻辑 - 最简解法：给卡片加
overflow-hidden，再用border+rounded，视觉上更紧凑
实际布局中，最易被忽略的是卡片内
如何让“推荐”标签在不同断点下保持视觉一致性？
很多方案用 position: absolute 叠加徽章，结果在 col-md-4 切换为 col-12 时标签跑出卡片边界——这不是定位问题，而是容器尺寸变化后绝对定位的参照系丢失。
实操建议：
card-body 内部文字对齐和价格数字突出怎么做才不破坏响应式？
直接给价格加 fs-1 fw-bold 在小屏上会溢出卡片，或压扁其他文案；用媒体查询单独写 CSS 又违背 Bootstrap 的原子类原则。
实操建议：
为什么加了 border 却在移动端看起来“断开”？
不是边框真的断了，是 col 之间的 g-3 间距（默认 1rem）让相邻卡片的边框被白色间隙隔开，形成视觉断裂。尤其当背景非纯白时更明显。
实操建议：
card-header 和 card-footer 的 padding 响应式行为——它们默认不随断点缩放，需要手动覆盖 py-3 py-md-4 这类组合类。不然小屏下头部留白过大，整体比例就失衡了。
