Bootstrap怎么设置Card卡片的鼠标悬停放大交互-Bootstrap教程-PHP中文网

加 transform: scale(1.05) 没动画效果，是因为缺少 transition 声明；最小必要组合是：基础态写 transition: transform 0.3s ease，悬停态写 transform: scale(1.05)，并配 transform-origin: center 和 overflow: hidden。

直接加 transform: scale(1.05) 没反应，大概率是因为缺 transition；真正起效的最小必要组合是：基础态声明 transition: transform 0.3s ease，悬停态写 transform: scale(1.05)，且必须配 transform-origin: center 和 overflow: hidden。

为什么写了 scale 却没动画？

浏览器默认不给任何 CSS 属性加过渡效果，transform 也不例外。只写 .card:hover { transform: scale(1.05); } 会导致“啪”一下跳变，不是平滑放大。

transition 必须写在非 :hover 的基础规则里，比如 .card { transition: transform 0.3s ease; }
别用 transition: all 0.3s —— 它会让边框、阴影、文字都动，性能差，还可能引发边缘发虚
如果用了 !important 覆盖了 Bootstrap 默认样式，但又没覆盖到你自定义的 transition，也会失效

放大后卡片溢出或压到邻居怎么办？

Bootstrap 的 .card 默认是文档流中的块级元素，scale() 不改变布局尺寸，但视觉上变大了，容易和周围卡片重叠或裁切。

给 .card 加 overflow: hidden，防止内部图片/文字撑破圆角或阴影
加 transform-origin: center，避免默认从左上角缩放导致整体偏移
悬停时加 z-index: 2（默认是 0 或 1），确保不被隔壁卡片遮住
如果卡片在 .row > .col 里，别改 display 或 position —— 会破坏栅格流

移动端点按没反馈？这不是 bug，是限制

iOS Safari 和多数安卓浏览器对 :hover 支持极弱，纯靠悬停在触摸设备上基本无效。不能只依赖它。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

简单补救：.card:active { transform: scale(1.05); }，至少点按有响应
更稳妥：用 JS 在 touchstart 时加 is-hovered 类，touchend 清除，CSS 写 .card.is-hovered 规则
别信 @media (hover: hover) —— iOS Safari 真机常返回 false，不可靠
慎用大区域（如整张卡片）模拟悬停感，点按意图模糊，体验反而下降

和 Bootstrap 5 的 shadow-* 类一起用要注意什么？

shadow-sm/shadow-lg 是通过 box-shadow 实现的，而 transform 不影响阴影渲染位置——放大后阴影不会跟着变大，看起来像“脱离卡片”。

如果要阴影同步变化，得手动覆盖：.card:hover { box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15); }
不能只靠继承，悬停时必须重新声明整个 box-shadow 值
父容器设了 overflow: hidden（比如某些 wrapper 或 .card-group）会直接裁掉阴影，得检查祖先元素
推荐把 box-shadow 和 transform 放进同一个 transition 声明里，比如 transition: transform 0.3s ease, box-shadow 0.3s ease;