卡片移动端堆叠错位或重叠，90%因固定width或缺失row容器；需删除所有内联width、确保col嵌套在row内，且图标与卡片同级作为col直接子元素。
卡片在移动端堆叠错位或重叠，90% 是因为写了固定 width 或漏掉了 row 容器；删掉所有内联宽度、确保 col 嵌套在 row 内，并让图标和卡片同级作为 col 的直接子元素，就能恢复正确堆叠。
为什么加了 col-12 还是堆叠错位？
常见错误是给卡片加了 style="width: 17em;" 或类似固定宽度——这会覆盖 Bootstrap 的 flex 布局逻辑，导致小屏下卡片无法收缩，横向溢出并压垮相邻列。另一个隐形问题是没用 row 包裹 col：没有 row，col 就退化成普通块级元素，负 margin 和 flex 行为全部失效。
- 删掉所有卡片上的
style="width: ..."或width相关 CSS - 确认每个
col-12都包裹在<div class="row"> 内 <li>Bootstrap 4.3 及更早版本不支持 <code>g-3，改用mx-n2+px-2模拟列间隙 - 把图标和文字一起包进
<div class="d-flex align-items-center"> <li>图标用 <code>me-3（不是mr-3）保持右侧间距，兼容 RTL - 文字容器加
text-truncate防止长文本撑破列宽 - 必要时限制高度：
style="max-height: 2.4em; line-height: 1.2;"，对应两行不截断 - 图标本身推荐用
<i class="bi bi-graph-up"></i>（Bootstrap Icons CDN），比 Font Awesome 更轻 - 尺寸统一用
fs-2或fs-3，避免混用不同font-size导致列高不一致 - 视觉节奏靠间距工具类调节：父容器设
h2或display-3，再用mt-1 mb-2调上下留白 - 别混用旧版类名（如
glyphicon），Bootstrap 5 已移除支持 -
col是响应式计算单元，所有视觉元素（图标、文字、卡片）必须平级作为它的直接子元素 - 正确结构：
<div class="col-6 col-md-4"> <i class="bi bi-heart fs-2"></i><div class="small mt-1">收藏</div> <div class="card h-100"><div class="card-body"></div></div> </div> - 如果不要边框/阴影，就别套
card；如果要，card必须是col的**直接子元素**，不能嵌套在其他div里
图标和文字在手机上怎么垂直居中不偏移？
图标默认是行内元素，基线对齐不稳定；塞进 card-header + card-body 会导致 padding/border 不一致，小屏下“浮高”或下沉。最稳的做法是放弃 header/body 切分，用 d-flex align-items-center 控制内部流式布局。
图标尺寸怎么在不同断点下协调又不失真？
直接用 fa-2x 或 display-4 这类固定尺寸类，小屏上图标会过大、挤压文字甚至溢出卡片边界。Bootstrap 的响应式字号类（如 fs-md-3）对图标字体无效，它们只作用于文本节点。
为什么图标必须和卡片平级放在 col 里？
常见错误写法：<div class="col"><div class="card"><i class="bi bi-star"></i></div></div>。这样图标被锁死在卡片内部，失去独立响应能力：小屏时卡片宽度收缩，但图标无法居中；卡片高度由内容撑开，网格行高就不一致。
最容易被忽略的是结构层级——图标塞进 card 内不是样式问题，是语义和响应式计算单元错了；一旦漏掉 row 或写了固定 width，所有后续样式调试都是徒劳。
