当使用 bootstrap 创建响应式卡片布局时，若为卡片设置了固定 `width`（如 `style="width: 17em;"`），会导致移动端视口缩小时卡片无法自适应缩放，从而发生水平溢出与视觉重叠。移除内联宽度样式，交由 bootstrap 的栅格系统和卡片默认行为控制尺寸，即可恢复正确的垂直堆叠。
在 Bootstrap 中，卡片（.card）本身是块级弹性容器，其宽度默认继承父容器（如 .col-*）。而你在每个
上添加了 style="width: 17em;" —— 这是一个固定宽度的内联样式，它会强制卡片保持 17em 宽度，无论父列（.col-md-4）在小屏下如何收缩。
在桌面端（≥992px），.col-md-4 每列约占容器 33.33%，17em 宽度尚可容纳；但在手机端（如
✅ 正确做法：完全移除 style="width: 17em;"，让卡片自然撑满所在列宽：
<!-- ❌ 错误：固定宽度破坏响应式 --> <div class="card pt-2 bg-info text-white" style="width: 17em;"> <!-- ✅ 正确：依赖 Bootstrap 栅格与卡片默认行为 --> <div class="card pt-2 bg-info text-white">
同时建议优化列断点类，提升移动端体验：
- 将 col-md-4 col-4 改为 col-md-4 col-12：确保在超小屏（xs）下每张卡片独占一行（100% 宽），实现清晰垂直堆叠；
- 移除冗余的 position-static（该值为 CSS 默认值，无需显式声明）；
- 可选：为卡片添加 h-100 类，使多张卡片高度一致，提升视觉整齐度。
优化后的关键代码片段如下：
<div class="row text-center">
<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>
<!-- 其余两张卡片结构同上 -->
</div>? 注意事项总结：
- ✅ 始终优先使用 Bootstrap 的响应式工具类（如 col-*, w-100, h-100）控制尺寸，避免内联 width/height；
- ✅ 在移动端，col-* 类需匹配对应断点（如 col-12 作用于所有屏幕，col-sm-6 从 sm 起生效）；
- ✅ 若需统一卡片最小高度，可用 min-height: 200px; 等 CSS，但应通过自定义 CSS 类或
- ✅ 使用浏览器开发者工具（DevTools）的“设备模拟器”实时调试不同屏幕尺寸下的布局表现。
遵循以上原则，你的卡片布局将真正具备响应式能力：桌面端三栏并列，移动端自动转为单列垂直堆叠，美观且符合用户预期。
