直接给.col加:hover会失效或错位，因为.col是flex子项，其宽度、padding、margin随断点动态变化，而:hover动画依赖稳定尺寸定位；正确做法是在.col-*内嵌一层position: relative且具显式高度的直接子容器，并将悬停样式施加其上。
为什么直接给 .col 加 :hover 会失效或错位
因为 .col 是 flex 子项，它的宽度、padding、margin 都随断点动态变化。:hover 动画依赖稳定尺寸定位，一旦从 col-md-4 切到 col-lg-3，列宽突变会重置 transform 过渡，导致卡顿、闪退甚至遮罩层偏移。
正确做法是：在每个 .col-* 内嵌一层容器，并设为 position: relative 和显式高度（比如 style="height: 200px"），把悬停样式写在这层上，而不是 .col 本身。
- 别用
.card-deck—— Bootstrap 5 已移除，强行使用会导致末行拉伸、z-index 失效 - 禁用
col直接作为 hover 容器，否则移动端触控时 overlay 位置飘移 - 该内层容器必须是
.col-*的**直接子元素**，否则position: absolute的遮罩会脱标错位
object-fit: cover 不生效的三个常见原因
单独给 <img> 加 object-fit: cover 没用——浏览器仍按原始图片尺寸撑开父容器，网格照样塌陷。它必须配合明确高度的父容器才起作用。
推荐组合写法：<div class="position-relative" style="height: 200px"><img src="..." class="w-100 h-100 object-fit-cover"></div>
- 没设父容器高度（哪怕只是
min-height或aspect-ratio）→object-fit被忽略 - 用了
height: 100%但父级没设高度 → 形成死循环，裁剪不触发 - Bootstrap 精简版未启用
object-fit-cover工具类 → 需手动加 CSS 或确认bootstrap.min.css包含该工具类
移动端悬停交互失效怎么办
iOS 和 Android 触屏设备对纯 CSS :hover 支持极弱：只模拟一次点击，不支持长按、二次交互，用户点一下就闪退，根本看不到遮罩文字。
必须补救：
- 给悬停容器加
touch-action: manipulation，提升触控响应优先级 - 关键按钮（如“查看详情”）加空
onclick=""，强制 iOS 激活:active状态 - 真要全平台一致？放弃
:hover，改用data-bs-toggle="modal"或监听 click 切换.show类 - 避免在
scroll事件里操作图片src，懒加载要用IntersectionObserver回调中赋值
图片比例不一致导致网格错行怎么解
混用 4:3、16:9、正方形图时，仅靠 img-fluid 会让卡片高度参差不齐，遮罩文字垂直位置飘移，尤其在 col-xl-3 四列布局下明显。
核心不是 JS 计算高度，而是 CSS 截断或约束显示区域：
- 用
object-fit: cover + height: 200px强制裁剪居中（推荐） - 用
min-height: 200px + object-fit: contain保持完整但留白（适合图文混合场景） - 别对
.card设固定height，否则文字可能被截断 - 如果含标题/描述，用
h-100 d-flex flex-column包裹，再flex-grow-1让图片占满剩余空间
最易被忽略的是：Safari 旧版本不支持 object-fit，得加降级样式 img { font-size: 0; } 防止行内间隙，或用 background-image 替代（但牺牲 alt 和 SEO）。
