卡片必须用.card包裹且遵循标准结构：.card→.card-img-top→.card-body；图片需用object-fit:cover配合固定高度；图文列表用.row+.col-*而非废弃的.card-deck。
卡片结构必须用 .card 包裹，不能只靠 CSS 模拟
直接写 <div class="card"> 是最低要求，否则 Bootstrap 的响应式间距、圆角、阴影等样式不会生效。常见错误是套了一层自定义 class 就以为能替代 <code>.card，结果在小屏下卡片堆叠错乱、图片溢出、文字不换行——这些基本都是没用对容器导致的。
标准结构要严格遵循：.card → .card-img-top（图片）→ .card-body（文字内容）。图片必须放在 .card-img-top 或 .card-img-bottom 里，否则无法自动适配宽高比，尤其在 Flex 布局中容易撑破卡片。
.card-img-top 的图片尺寸和加载方式很关键
Bootstrap 不处理图片本身，所以你得自己控制尺寸和加载行为。默认 .card-img-top 是块级元素、宽度 100%，但高度由图片原始比例决定。如果图片高宽比不统一，列表会参差不齐。
- 推荐统一用
object-fit: cover配合固定高度（如height: 180px），避免拉伸变形 - 不要依赖
img width/height属性，它会破坏响应式；改用 CSS 控制 - 懒加载请用
loading="lazy"，但注意 Safari 旧版本不支持，可加data-src+ JS 回填作为降级
图文列表用 .row + .col-* 布局，别用 .card-deck
.card-deck 已在 Bootstrap 5 中被废弃，且它强制所有卡片等高，在图文列表里反而让短文本卡片底部留大片空白。正确做法是用 .row 包裹，每个卡片放在 .col-md-4 或 .col-lg-3 里，靠栅格系统控制列数。
示例结构：
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">标题</h5>
<p class="card-text">描述文字</p>
</div>
</div>
</div>
<!-- 更多 col -->
</div>注意：如果卡片内有按钮或链接，确保 .card-link 或 a.btn 放在 .card-body 内，否则点击区域可能失效。
移动端图文错位？检查 .card-img-top 是否被父级 overflow: hidden 截断
有些 UI 框架或自定义 CSS 给 .card 加了 overflow: hidden，看起来没问题，但在 iOS Safari 下，如果图片用了 object-fit: cover 且容器没有明确高度，就可能出现图片顶部被切掉、文字上移等现象。
解决方法：
- 给
.card-img-top显式设置height（如160px），并配合object-fit: cover - 避免在
.card上叠加其他overflow规则 - 真机调试时重点看
computed style里的height和overflow实际值
图文列表真正难的不是写出来，而是让几十张不同尺寸的图在各种设备上都“看起来像一组”。这取决于你是否愿意为 .card-img-top 多写两行 CSS，而不是指望框架自动搞定。
