bootstrap按钮组需用.btn-group配合flex-wrap、d-md-inline-flex等断点类实现响应式布局，悬停发光效果须通过自定义box-shadow配合transition实现，避免直接:hover冲突且适配深色模式与移动端。
按钮组怎么用 .btn-group 实现基础响应式布局
Bootstrap 的 .btn-group 本身不自动响应式，小屏幕下会横向溢出。必须配合 .btn-group-vertical 或断点工具类手动控制。常见错误是直接套 .btn-group 就以为能自适应——它只负责水平内联，不处理换行或堆叠。
正确做法是在中屏（md）以下让按钮垂直排列：
<div class="btn-group flex-wrap d-md-inline-flex"> <button class="btn btn-primary">编辑</button> <button class="btn btn-outline-secondary">删除</button> <button class="btn btn-light">查看</button> </div>
关键点：
• d-md-inline-flex 在 md 及以上保持行内弹性布局
• flex-wrap 允许按钮在窄屏下自动换行（比 .btn-group-vertical 更灵活）
• 不要用 .btn-group 包裹整个容器，否则会强制 nowrap，反而破坏响应式
悬停发光效果该加在哪一层？别直接写 :hover
Bootstrap 5+ 默认禁用 box-shadow 的 hover 动画，因为性能敏感。直接对 .btn 写 :hover { box-shadow: 0 0 8px rgba(0,123,255,.5) } 会和内置的 focus-ring 冲突，且移动端无效（无 hover 状态）。
推荐方案：用 data-bs-toggle="button" 触发伪类 + CSS 自定义属性控制光效强度：
.btn[data-bs-toggle="button"]:hover {
box-shadow: 0 0 12px var(--bs-btn-hover-shadow, rgba(0,123,255,.4));
transition: box-shadow .2s ease-in-out;
}
注意：
• 必须加 transition，否则发光是突变的
• 用 var(--bs-btn-hover-shadow) 复用 Bootstrap 主题色变量，避免硬编码颜色
• 如果按钮有 disabled 状态，要额外加 .btn:disabled:hover { box-shadow: none }
发光按钮组在 Safari 和旧版 Android 上失效怎么办
主要问题是 box-shadow 在 Safari 15.4 之前不支持 inset 以外的模糊半径动画，而部分 Android WebView（尤其 4.4–6.x）完全忽略 transition 对 box-shadow 的作用。
兼容性兜底策略：
• 降级为 transform: scale(1.02) 配合微弱阴影，所有浏览器都支持
• 对 iOS 加 -webkit-appearance: none 防止按钮被系统样式覆盖
• 在 @supports (backdrop-filter: blur(1px)) 块里启用更重的发光（仅现代浏览器）
示例片段：
@supports (transition: box-shadow .2s) {
.btn:hover { box-shadow: 0 0 14px rgba(0,123,255,.6); }
}
@supports not (transition: box-shadow .2s) {
.btn:hover { transform: scale(1.03); }
}
为什么发光效果在按钮组里看起来“粘连”？
因为 .btn-group 默认给子按钮设了 margin-left: -1px，导致相邻按钮的发光阴影互相覆盖、边界模糊。这不是 bug，是 Bootstrap 为消除边框重叠做的设计，但会吃掉发光的外延部分。
修复方法只有两个有效选择：
• 改用 gap 替代负边距：给容器加 gap: 0.25rem，同时移除所有 .btn 的 border-radius（否则圆角间隙不均）
• 保留负边距，但把发光改到伪元素上：.btn::after { content: ""; position: absolute; inset: -4px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,123,255,.5); opacity: 0; transition: opacity .2s; }，再通过 :hover::after { opacity: 1 } 控制显隐
后者更稳妥，因为不破坏原有布局流，也避免 gap 在 IE 中完全不可用的问题。
transition-delay 或缓动曲线，会感觉光效跳变。建议统一用 cubic-bezier(.25,.46,.45,.94)，比默认的 ease 更跟手。
