卡片点击无反馈需检查user-select:none是否抑制:active，确保用或role="button"，设置transition于常态、transform-origin:center，并在移动端处理touch-action和tap-highlight。
卡片点击时没反应？先确认是否禁用了 user-select
Bootstrap 卡片默认不会阻止文本选中，但很多开发者会全局加 user-select: none 来防误操作，这会同时抑制 :active 伪类触发——尤其在 Chrome 和 Edge 中，:active 在禁用选中的元素上可能完全不生效。
- 检查卡片或其父容器是否设置了
user-select: none；如有，改为user-select: auto或仅对文字子元素设user-select: none - 确保卡片本身是可交互元素：推荐用
<button></button>或带role="button"的<div>，避免纯 <code><div> 在无障碍和部分浏览器中无法触发 <code>:active - 移动端需额外加
-webkit-tap-highlight-color: transparent，否则 Safari 会覆盖缩放效果
用 :active + transform 实现缩放反馈的最小可行写法
不要依赖 JavaScript 监听 click 再切 class，原生 :active 更轻量、更及时。关键点在于过渡属性必须作用于常态（非 :active），且 transform 需兼容所有主流引擎。
.card {
transition: transform 0.15s ease;
/* 不要在这里写 transform: scale(1) */
}
.card:active {
transform: scale(0.98);
}-
transition必须写在常态规则里，写在:active中无效 - 缩放值建议用
0.98而非0.95或更低——太小易被误判为卡顿，太大则失去“按下”感 - 若卡片含图片或阴影，缩放可能引发重绘抖动；可加
will-change: transform提前提示渲染层，但仅在性能确实下降时启用
为什么 Bootstrap 5 的 .card 没有默认点击反馈？
因为 Bootstrap 定位是 UI 工具集而非交互框架，它把“是否可点击”“如何反馈”交由使用者决定。官方卡片组件（如 .card）语义上只是容器，不带 tabindex、不响应空格/回车键、也不处理焦点样式。
- 若需键盘支持（比如用空格触发），必须手动加
tabindex="0"和监听keydown - 只靠
:active无法覆盖键盘操作，此时得配合:focus-visible做焦点反馈 - Bootstrap 5 的
.btn类自带完整交互逻辑，如果卡片本质是按钮，直接用<button class="btn card"></button>更稳妥
移动端真机测试时缩放失效？检查 touch-action
某些安卓 WebView 或 iOS Safari 会对 transform 缩放做拦截，尤其当卡片父容器设置了 touch-action: pan-y（常见于滚动区域内部）——这会禁止横向及缩放类手势，连 :active 都被跳过。
立即学习“前端免费学习笔记（深入）”；
- 临时调试可在卡片上加
touch-action: manipulation，允许浏览器优化点击和双指缩放 - 生产环境慎用，它会禁用双指缩放页面，若卡片在图文流中，可能影响阅读体验
- 更安全的做法：用
pointer-events: auto显式启用，再配合@media (hover: none)给无 hover 设备降级为 opacity 变化
真正容易被忽略的是：缩放中心点默认是元素左上角。如果卡片有 border-radius 或阴影，缩放后边缘会“抽搐”。加一句 transform-origin: center 就能稳住，但很多人直到上线才注意到那个一闪而过的错位。
