bootstrap 卡片在移动设备上出现重叠或错位，通常是因为固定宽度（如 `style="width: 17em;"`）与响应式栅格系统冲突，导致卡片无法随 `col-*` 类自动适配屏幕尺寸。移除内联宽度并交由 bootstrap 的弹性布局控制即可修复。
在使用 Bootstrap 构建响应式卡片布局时，一个常见误区是为 .card 元素添加固定宽度（例如 style="width: 17em;"）。虽然该设置在桌面端看似正常，但在移动端却极易引发布局异常——如卡片相互覆盖、溢出容器、或无法按预期换行堆叠。
根本原因在于：Bootstrap 的栅格系统（如 col-md-4）已为列分配了响应式宽度（如在中屏及以上占 1/3 宽度），而手动设置 width: 17em 会强制卡片保持固定尺寸，破坏其在小屏幕下的流式伸缩能力。尤其当父容器变窄（如手机视口宽度仅 ~375px）时，17em（≈272px）可能超出单列可用空间，导致卡片内容挤压、文字换行异常，甚至触发浏览器的“最小宽度保护”机制，造成视觉重叠。
✅ 正确做法是完全移除所有内联 width 样式，让卡片自然继承父列宽度，并通过 Bootstrap 工具类控制间距与内边距：
<!-- ✅ 推荐：无固定 width，依赖响应式栅格 -->
<div class="col-md-4 col-12 p-2">
<div class="card pt-2 bg-info text-white h-100">
<i class="display-1 fa fa-desktop icon-lg icon-purple icon-bg-purple icon-bg-circle mb-3"></i>
<div class="card-body">
<h5 class="card-title">Web App Development</h5>
<p class="card-text">Some quick example text to build on the card title...</p>
</div>
</div>
</div>? 关键优化点：
- 将 col-4 改为 col-12（或保留 col-md-4 col-12），确保移动端每行仅显示一张卡片；
- 添加 h-100 类使卡片高度一致，避免因内容长度差异导致的参差不齐；
- 使用 p-2（而非 p-2 + 固定宽）配合 text-center 维持居中与留白；
- 若需统一卡片宽度（如设计要求），应通过 CSS 自定义类（如 .card-fixed-width { width: 17rem; }）并在媒体查询中覆盖，而非内联样式。
⚠️ 注意事项：
- 避免混合使用 position-static（默认即 static，无需显式声明）；
- 确保引入的是 Bootstrap 5+（示例中使用 bootstrap@5.3.x），其栅格系统默认启用 flex 布局，兼容性更佳；
- 图标字体（如 Font Awesome）请确认已正确加载，否则 fa-* 类可能失效，影响视觉结构。
综上，响应式卡片布局的核心原则是「让栅格系统做宽度决策，让卡片做内容填充」。移除硬编码宽度，拥抱 Bootstrap 的移动优先设计逻辑，即可一劳永逸解决移动端堆叠错位问题。
