bootstrap 5 默认禁用按钮 :active 样式以优化移动端体验，需手动添加 box-shadow 和 transition（含 box-shadow）才能实现按下阴影效果，且仅对非 disabled 按钮生效。
Bootstrap 按钮按下时的 :active 样式默认不生效？
Bootstrap 5 默认禁用了按钮在触摸设备上的 :active 状态反馈（包括阴影、背景色变化等），目的是避免移动端点击后残留“按压态”，影响体验。但如果你明确需要在 PC 或特定场景下保留按下效果（比如模拟物理按键的 BtnActiveShadow），就得手动覆盖。
关键点在于：Bootstrap 的 .btn 类本身没定义 :active 的 box-shadow，且其 transition 属性默认只作用于 color、background-color 和 border-color，不包含 box-shadow —— 所以即使你写了 :active { box-shadow: ... }，也可能因过渡缺失而显得生硬或不可见。
- 必须显式添加
box-shadow到:active伪类 - 需补全
transition，把box-shadow加进去，否则变化会突兀 - 注意优先级：Bootstrap 的 CSS 权重高，建议用
.btn:active或更高特异性选择器（如.btn.btn-custom:active）
如何给 Bootstrap 按钮添加自定义按下阴影（BtnActiveShadow）
直接在 CSS 中扩展即可，无需改 Bootstrap 源码。推荐为需要该效果的按钮加一个语义化 class，比如 btn-active-shadow，然后针对性覆盖：
.btn.btn-active-shadow:active {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.15s ease;
}
注意两点：
-
transition值要写完整，不能只写box-shadow，否则会覆盖 Bootstrap 原有的过渡声明（导致 hover 效果也失效）；正确做法是复制原有transition并追加box-shadow - 如果按钮用了
.btn-outline-*类，它的:active背景是透明的，此时阴影会更明显；而.btn-primary类按下时背景变深，阴影需调低透明度，否则视觉过重
移动端点击后阴影一闪就消失？
这是 Safari 和部分 Android 浏览器的默认行为：点击后触发 :active，但松手瞬间立即回退，人眼难捕捉。不是代码错了，是浏览器“优化”掉了长按反馈。
解决方法只有两个实际有效的：
- 加
touch-action: manipulation到按钮上，能略微延长:active持续时间（对 iOS 13+ 有效） - 放弃纯 CSS 方案，用 JS 监听
mousedown/touchstart和mouseup/touchend，动态加删 class（例如is-pressed），再用 CSS 控制该 class 下的box-shadow
后者更可控，尤其适合需要精确匹配硬件按键反馈节奏的场景。
和 Bootstrap 5.3+ 的 data-bs-toggle 冲突吗？
不冲突。像 <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#m"></button> 这类带 Bootstrap JS 行为的按钮，其 :active 伪类仍正常触发。但要注意：如果 JS 在 click 事件中立即打开模态框，页面焦点/滚动可能打断视觉反馈，导致阴影看起来“没出现”。这时建议在 JS 中延迟 100ms 再执行 toggle，或确保 CSS 的 transition 时间短于这个延迟。
真正容易被忽略的是：当按钮处于 disabled 状态时，:active 完全不会触发 —— 即使你写了样式也没用。所以 BtnActiveShadow 只对可交互按钮有效，这点常被当成 bug 排查半天。
