直接用 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">，并设显式高度（如 <code>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 没用——浏览器仍按原始图片尺寸撑开父容器，网格照样塌陷。


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• 必须让图片父容器有明确高度：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"，模态框打开时加载所有大图，卡顿明显。