手机端堆叠失效、阴影错位或过重，根本原因是卡片没交出宽度控制权且阴影未做断点适配；需删除内联width、用col-12显式单列、加h-100+d-flex flex-column、自定义box-shadow替代shadow-lg，并确保row容器存在、角标锚定position-relative父容器。
手机端堆叠失效、阴影错位或过重，根本原因是卡片没交出宽度控制权，且阴影没做断点适配。直接删掉所有 style="width: ..."，用 col-12 显式声明单列，并给卡片加 h-100 + d-flex flex-column，阴影改用自定义 box-shadow 而非 shadow-lg。
为什么手机上卡片不堆叠还横向溢出？
最常见错误是给 <div class="card"> 加了内联 <code>width（比如 style="width: 20em;"），它会强行撑开，无视 col-12 的响应逻辑。Bootstrap 的栅格靠 flex 流动，固定宽度会覆盖 flex-basis，导致卡片在小屏下溢出容器，甚至压垮相邻元素。
- 必须删掉所有卡片上的
style="width: ..."或widthCSS 声明 -
col必须嵌套在row内——漏掉row容器时，col-12退化为普通块级元素，换行逻辑完全失效 - 移动端堆叠依赖的是
col-12，不是默认行为；不显式写，某些旧版或定制 build 可能 fallback 到col-md-4
卡片高度不齐、按钮位置飘移怎么办？
价格卡片内容长度天然不同：基础版描述短，企业版功能多一行，纯靠 card-body 默认流会导致底部按钮高低错乱，对比失效。不能设 min-height——小屏下留白太大，破坏体验。
- 给每个
card加h-100，强制占满所在列高 - 在
card-body上加d-flex flex-column h-100，让内部垂直流可控 - 把价格文字包进
<div class="mb-3">，按钮加 <code>mt-auto吸到底部 - 功能列表用
<ul class="list-unstyled m-0 p-0"></ul>+<li class="mb-1">，避免list-group在小屏下因 padding 拉高整体 - 别用
shadow-*工具类，改用自定义 class（如card-shadow）写box-shadow - 在
@media (max-width: 575.98px)下把box-shadow的blur和offset减半，例如从0 12px 24px rgba(0,0,0,0.2)改为0 6px 12px rgba(0,0,0,0.12) - 卡片本身不要设
overflow: hidden；需要圆角就用rounded，留出足够padding容纳阴影 - 悬停阴影（
:hover）在触屏设备无效，需补充:active状态，且只对(hover: hover) and (pointer: fine)设备启用:hover - 必须用
<div class="position-relative"> 包住整个 <code>card，作为绝对定位锚点 - 角标用
<span class="position-absolute top-0 start-50 translate-middle badge bg-primary">推荐</span> - 想在手机上隐藏角标，加
d-none d-md-inline-block；只写d-md-block会在小屏下仍占位 - 别给推荐卡片额外加
col-md-5类——会打破栅格平衡，导致其他卡片换行
阴影在手机上太重或被裁掉怎么调？
shadow-sm/shadow-lg 是固定值，不随视口缩放调整。小屏下 shadow-lg 模糊半径过大，挤压内容边距；如果卡片设了 overflow: hidden，阴影还会被直接裁掉。
推荐档位角标在手机上跑出卡片边界？
用 position: absolute 放“推荐”标签时，若父容器没设 position: relative，定位会相对于 body，小屏下卡片变窄，“推荐”就飞出去了。
真正卡住人的从来不是“怎么加阴影”，而是卡片有没有交出宽度控制权、阴影有没有按断点分级、以及角标有没有锚定到正确的相对容器。这三处不动，其余再调也白搭。
