直接改.dropdown-item:active颜色一闪就消失，是因为:focus状态覆盖了:active；必须同时设置.dropdown-item:active和.dropdown-item:focus，禁用outline时需补box-shadow:none；移动端点击映射为focus或延迟触发，需真机测试；链接型下拉项还需覆盖:visited防止二次点击跳变；Bootstrap 5.2+推荐用--bs-dropdown-link-active-color等CSS变量统一控制。
直接改 .dropdown-item:active 为什么颜色一闪就没了
不是样式没生效，而是 :active 状态被 :focus 覆盖了。Bootstrap 默认给 .dropdown-item:focus 设了背景色和 focus ring（用 box-shadow 实现），点击后焦点仍保留在元素上，视觉上“抢走”了 :active 的表现。
必须同时覆盖两个状态：
-
.dropdown-item:active, .dropdown-item:focus写在同一个 CSS 规则里 - 如果禁用了
outline，一定要补box-shadow: none，否则默认的蓝色 focus ring 还在 - 移动端真机测试不可跳过：Android Chrome 常把点击映射为
focus，iOS 则可能延迟触发，只靠:active会不同步
链接型下拉项必须连 :visited 一起覆盖
如果 .dropdown-item 是 <a> 标签，浏览器对已访问链接有强默认行为（比如变紫色）。哪怕你写了 .dropdown-item:active { color: #fff; }，用户第二次点同一项，颜色也会回退。
必须显式重置：
.dropdown-item:visited-
.dropdown-item.active:visited（如果用了 JS 激活状态） - 否则在 Chrome/Firefox 下，点击后颜色会“跳变”或失效
Bootstrap 5.2+ 推荐用 CSS 变量统一控制
比写一堆选择器更稳，且自动适配深色模式：
:root {
--bs-dropdown-link-active-color: #fff;
--bs-dropdown-link-hover-color: #e9ecef;
--bs-dropdown-link-color: #212529;
}
注意两点：
- 该变量只影响 Bootstrap 内部用到它的组件（如
.dropdown-item），不作用于原生<a> - 必须放在
<head>或全局样式最开头，确保它在 Bootstrap CSS 之后、你的其他规则之前生效
移动端点击无反馈？先检查热区是否被压缩
常见原因是替换了图标或加了 padding 后，.dropdown-item 的可点击区域变窄，尤其在小屏上容易误触失败。
验证方法：打开 DevTools，选中 .dropdown-item，看 computed 中 height 和 padding 是否合理（建议最小高度 ≥ 40px，上下 padding ≥ 0.5rem）。
修复建议：
- 避免只调
font-size或line-height来“撑高”，优先用padding - 如果用了
text-center或text-end，注意pe-3或px-3补右边距，防止文字贴右边缘 - 真机测试时关掉“缩放文本”系统设置，避免字体放大后行高塌陷
