直接用 row + col 搭配固定高容器和 object-fit: cover 可实现真正可用的响应式悬停画廊；.card-deck 在 Bootstrap 5 中已废弃，硬用会导致错位、拉伸与 z-index 失效。
直接用 row + col 搭配固定高容器和 object-fit: cover 就能实现真正可用的响应式悬停画廊；别碰已移除的 .card-deck，它在 Bootstrap 5 中彻底废弃，硬用会导致悬停错位、末行拉伸、z-index 失效。
为什么不能直接给 .col 加 :hover
.col 是 flex 子项，宽度随断点动态变化，而 :hover 动画依赖稳定尺寸定位。一旦从 col-md-4 切到 col-lg-3，列宽突变会重置 transform 过渡，导致动画卡顿或闪退。
- 正确做法：在每个
.col-*内嵌一层<div class="position-relative">，并设显式高度（如style="height: 200px"） - 悬停样式写在这层
div上，不是.col本身 - 图片加
class="w-100 h-100 object-fit-cover"，确保填满且裁剪居中 - 加
style="will-change: transform"避免 Safari / 旧 Chrome 掉帧
object-fit: cover 为啥不生效
单独给 <img> 加 object-fit: cover 没用——浏览器仍按原始图片尺寸撑开父容器，网格照样塌陷。
- 必须让图片父容器有明确高度：
height、min-height或aspect-ratio - Bootstrap 5.3+ 支持
ratio ratio-4x3工具类，比固定像素更适配不同断点 - 降级兼容 Safari 旧版：加
img { font-size: 0; }消除行内间隙 - 别写
height: 100%却不设父级高度，这是常见死循环
移动端点击悬停效果失效怎么办
iOS 和 Android 触屏设备上，纯 CSS :hover 只触发一次模拟悬停，overlay 弹出来就消失，用户根本看不到内容。
- 强制激活触控响应：给悬停容器加
style="touch-action: manipulation" - 关键按钮（如“查看详情”）加空
onclick=""，让 iOS 正确触发:active - 真要全平台一致？放弃
:hover，改用data-bs-toggle="modal"或 JS 切换.show类 - 别用
pointer-events: none盖住图片——它会让 touch 事件穿透，点击无效
图片比例不一导致网格错行，怎么稳住高度
混用 16:9、4:3、正方形图时，仅靠 img-fluid 会让卡片高度参差不齐，悬停文字垂直位置飘移，尤其在 col-xl-3 四列布局下非常明显。
- 统一用
h-100 d-flex flex-column包裹内容区，再用flex-grow-1让图片占满剩余空间 - 避免用
flex: 1或min-height: 100%—— 在 flex 容器里容易失效 - 如果含标题/描述，用
d-flex align-items-center justify-content-center居中 overlay 文字 - 慎用
row-cols-*：它只控制每行数量，不解决单个卡片内部高度不一致问题
最常被忽略的点是：悬停容器没设 position: relative，导致 position: absolute 的 overlay 脱标错位；还有就是忘记给 <img> 加 loading="lazy"，模态框打开时加载所有大图，卡顿明显。
