直接用row+col搭配固定高容器和object-fit:cover可实现响应式悬停画廊；禁用已移除的.card-deck，须在.col内嵌position-relative容器设显式高度，hover样式作用于该容器而非.col本身，图片加w-100 h-100 object-fit-cover并配touch-action:manipulation保障触控生效。
直接用 row + col 搭配 card 或纯 div 容器，配合 object-fit: cover 和固定容器高度，就能实现真正可用的响应式悬停画廊；别用 .card-deck，它在 Bootstrap 5 中已被移除，强行用会导致悬停错位、末行拉伸、z-index 失效。
为什么不能直接给 .col 加 :hover 样式
因为 .col 是 flex 子项，宽度随断点动态变化，而 :hover 动画依赖稳定尺寸定位。一旦从 col-md-4 切到 col-lg-3，列宽突变会重置 transform 过渡，导致动画卡顿或闪退。
- 正确做法：在每个
.col-*内嵌一层div，加position: relative和显式高度（如style="height: 200px"） - 悬停样式写在这层
div上，不是.col - 图片用
img-fluid w-100 h-100 object-fit-cover，确保填满且裁剪居中 - 加
will-change: transform避免 Safari/旧 Chrome 掉帧
object-fit: cover 为啥不生效
单独给 <img> 加 object-fit: cover 没用——浏览器仍按原始图片尺寸撑开父容器，网格照样塌陷。
- 必须让图片父容器有明确高度（
height、min-height或aspect-ratio） - 推荐写法：
<div class="position-relative" style="height: 200px"><img class="w-100 h-100 object-fit-cover"></div> - Bootstrap 5.3+ 支持
aspect-ratio: 4 / 3工具类，可替代固定高，更适配不同断点 - Safari 旧版不支持
object-fit？加降级：img { font-size: 0; }消除行内间隙
移动端点击悬停效果失效怎么办
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让图片占满剩余空间 - 或直接设容器
style="height: 200px"，比min-height更可靠（后者在 flex 容器里常失效） - 避免用
height: 100%而不设父级高度——这是死循环，浏览器无法解析 - 最后一行留白？用
row-cols-3替代手动写col-md-4，Grid 自动按行均分，不补满
最易被忽略的是容器高度与 object-fit 的绑定关系：没高度，cover 就是摆设；还有移动端 touch-action 缺失导致悬停不可见——这不是 bug，是浏览器行为，必须显式补救。
