最常见原因是卡片设了固定 width 或漏掉 row 容器；应删除内联宽度、确保 col 嵌套在 row 内，并用 row-cols-* 实现等高堆叠，图标用 Bootstrap Icons 配合 d-flex align-items-center 垂直居中。
为什么加了 col 还是堆叠错位或重叠？
最常见原因是卡片本身写了固定 width（比如 style="width: 17em;"），它会强行撑开，无视 col-12 在小屏下的收缩逻辑。Bootstrap 的栅格靠 flex 布局流动，而内联宽度会覆盖 flex-basis，导致卡片在手机上横向溢出、压垮相邻元素，甚至视觉重叠。
另一个隐形坑是漏掉 row 容器——col 必须嵌套在 row 内才能触发负 margin 清除和 flex 行为；直接丢进 container 或 body，col 就退化成普通块级元素，换行逻辑全失效。
- 删掉所有卡片上的
style="width: ..."或width相关 CSS - 确保每张卡片都包裹在
<div class="col-12"> 内，且该 <code>col外层有<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 更轻、加载更快 - 避免给
i标签加fs-*类，改用h1～h6包裹并配合mb-0 - 需要大图标时，用
icon-lg这类语义类（需自定义 CSS），而不是硬写font-size: 2rem - 给
row加row-cols-1 row-cols-sm-2 row-cols-md-3，比每个card加h-100更可靠 - 如果必须用
h-100，确认卡片父col没被其他position: relative或overflow: hidden干扰 - 避免在卡片内用
height: 100%，它在 flex 布局中行为不可控
图标和文字怎么在移动端垂直对齐不偏移？
用 card-header + card-body 分割结构，在小屏下容易因 padding/border 不一致造成图标“浮高”或文字下沉。更稳的方式是放弃 header/body 切分，改用 d-flex 控制内部流式布局。
图标默认是行内元素，和文字基线对齐不稳定；加上 align-items-center 后，整个 flex 容器能统一锚定垂直中点，不管字体缩放或行高怎么变，图标和文字始终居中对齐。
如何让图标在不同断点下大小协调又不失真？
直接用 fa-2x 或 display-4 这类固定尺寸类，小屏上图标会过大、挤压文字，甚至溢出卡片边界。Bootstrap 5.3+ 的响应式字号类（如 fs-4 fs-md-3 fs-lg-2）不适用于图标字体（Font Awesome / Bootstrap Icons），它们只对文本生效。
稳妥做法是用 font-size 的视口单位或媒体查询，但更轻量的是借助 Bootstrap 的 spacing 工具类间接控制：图标父容器设 h2 或 display-3，再通过 mt-1 mb-2 调整上下留白，让视觉节奏自然过渡。
移动端堆叠后卡片高度不一致怎么办？
标题长短、描述有无、图片是否加载，都会让卡片高度参差不齐，形成“楼梯状”错位。这不是 bug，是 col 只管宽度不管高度的正常表现。单纯加 min-height 容易在不同设备上留白过多或截断内容。
h-100 是最简方案，但它依赖父容器有明确高度上下文——row 默认没问题，但如果卡片被包在额外的 div 里，可能失效。更鲁棒的是用 row-cols-1 系列类，它会自动为每列设置 flex: 1 1 0 并强制等高，无需手动干预。
实际中最容易被忽略的，是图标字体加载失败时的兜底处理——没引入 Bootstrap Icons CDN 或网络异常，i 标签就变成空白方块，整个卡片结构看起来像少了一块。建议在页面底部加个简单检测：if (!window.bootstrapIconsLoaded) { document.body.classList.add('icons-fallback'); }，再用 CSS 给 fallback 状态补个占位背景色。
