hover位移效果必须用transform而非margin或top，因后者触发重排导致卡顿，前者仅重绘且支持GPU加速；Bootstrap 4的.list-group-item默认支持transform，正确写法为transition: transform .25s ease-out并继承原有hover样式。
hover 位移效果必须用 transform 而非 margin 或 top
直接改 margin-left 或 top 会触发重排（reflow），动画卡顿明显；transform: translateX() 只触发重绘（repaint），GPU 加速更顺滑。Bootstrap 4 的列表项（如 .list-group-item）默认是块级元素，支持 transform，无需额外设 display。
常见错误：写成 transition: margin-left .3s —— 这样悬停时布局会抖动，且移动端响应迟钝。
- 正确写法：
transition: transform .25s ease-out - 悬停偏移量建议控制在
translateX(4px)到translateX(8px)之间，太大显得突兀 - 加
ease-out比linear更有“回弹感”，符合“优雅”预期
如何避免影响 Bootstrap 4 的默认 hover 样式冲突
Bootstrap 4 对 .list-group-item:hover 已定义背景色和边框变化，若直接覆盖 transform 但没保留原有状态，会导致悬停时背景不生效或边框跳变。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 不要单独写
.list-group-item:hover { transform: translateX(6px); }，而应继承原样式：.list-group-item:hover { background-color: #f8f9fa; border-color: #e9ecef; transform: translateX(6px); } - 如果用了
.list-group-flush，注意它去除了圆角和边框，此时需手动补border-radius和border，否则 translate 后边缘会“露空” - 禁用
!important—— 它会让后续调试（比如夜间模式适配）变得不可控
移动端需要禁用 hover 位移吗？
需要。iOS Safari 和部分安卓浏览器对 hover 支持不稳定，手指轻点可能不触发，长按又会误触发；而且位移在小屏上缺乏参照系，容易让用户困惑。
稳妥做法是用媒体查询关掉：
@media (hover: none) or (pointer: coarse) {
.list-group-item:hover {
transform: none;
transition: none;
}
}
这段代码能精准识别触屏设备（包括折叠屏平板），比单纯查 max-width 更可靠。别用 @media (max-width: 768px) —— 很多桌面触屏笔记本也落在这个范围里，却该保留 hover 效果。
为什么用 translateX 而不是 translate
translate 是简写，会重置 Y 轴偏移；如果列表项内部用了 position: relative 或其他 transform（比如图标旋转），叠加后行为不可预测。明确用 translateX 可隔离 X 轴动作，避免干扰。
另外，Bootstrap 4 的 .list-group-item 默认有 padding，位移后若容器没留白，右侧可能被裁切。解决方法很简单：
- 给父容器加
overflow-x: visible（默认就是 visible，一般不用动） - 或在
.list-group上加padding-right: 8px（数值略大于 translateX 值） - 绝对不要用
width: calc(100% + 8px)—— 它会破坏 Bootstrap 的栅格流体性
真正难的不是写几行 CSS，而是让位移在各种嵌套场景（比如放进 .card-body 或 modal-body）里都不破相。多试两轮不同缩放比例和字体大小，就能避开那些只在特定 DPI 下才暴露的错位问题。
