下拉菜单被 .dropdown-backdrop 遮挡的主因是其默认 position: fixed 导致在部分移动端浏览器中渲染层级异常；应改用 .dropdown-backdrop { position: static !important; }，禁用 display: none 以免破坏关闭逻辑。
下拉菜单被 .dropdown-backdrop 遮挡（移动端高频问题）
Bootstrap 在移动端展开下拉时会自动插入一个 <div class="dropdown-backdrop">，默认是 <code>position: fixed。某些安卓 WebView 或 iOS Safari 会把它渲染在菜单上方，导致点击穿透失败——你点的不是菜单项，而是这个透明 backdrop。
用开发者工具检查：展开菜单后搜索 dropdown-backdrop，看它是否盖在 .dropdown-menu 上方。别用 display: none 隐藏它，否则部分版本 Bootstrap 会因 backdrop 缺失而拒绝关闭菜单。
临时修复只需一行 CSS：
.dropdown-backdrop { position: static !important; }
pointer-events: none 或父容器截断了事件流
自定义 CSS 里如果对 .dropdown、.dropdown-toggle 或其任意祖先加了 pointer-events: none，整个交互链就断了。哪怕只加在某个响应式断点里（比如 @media (max-width: 768px)），也会让移动端彻底失活。
立即学习“前端免费学习笔记（深入）”；
常见误操作包括：
- 全局重置样式中写了
* { pointer-events: auto; }但漏掉了html或body - 导航栏折叠容器（如
.navbar-collapse）被设为overflow: hidden且高度不足，裁剪了下拉区域，视觉上“看不见”但实际 DOM 存在，事件仍可能被拦截 - 使用了
transform或will-change的父元素意外创建了新的层叠上下文，导致 backdrop 或 menu 的 z-index 计算异常
自定义类名覆盖了 .dropdown-menu 的关键样式
Bootstrap 的 .dropdown-menu 依赖 display: none、opacity: 0、transform: translateY(-0.5rem) 等初始状态，以及 JS 切换时添加的 show 类来触发动画和可见性。如果你的自定义 CSS 直接写了 .dropdown-menu { display: block; } 或 opacity: 1 !important，JS 就无法再控制显隐逻辑。
更隐蔽的是 CSS 变量覆盖：
-
--bs-dropdown-zindex被设得太低，菜单被其他组件压住（比如 sticky header） -
--bs-dropdown-min-width设为0，导致菜单宽度塌陷，触发按钮区域变小甚至不可点 - 重写了
.dropdown-menu的position（比如改成absolute却没配top/left），破坏 Popper 定位流程
为什么查 Computed 面板比看 Styles 更可靠
Styles 面板只显示你写了哪些规则，Computed 面板才告诉你浏览器最终采纳了哪条声明。比如你写了 .dropdown-menu { z-index: 1000; }，但 Computed 里显示 z-index: 1070 来自 bootstrap.min.css，说明你的规则根本没生效——不是 JS 问题，是 CSS 权重不够或被更高优先级规则覆盖。
这时候要立刻检查：
- 你的 CSS 文件是否真的在
bootstrap.min.css之后加载（查看页面源代码中的<link>顺序） - 有没有用
.dropdown .dropdown-menu这类组合选择器提权，而不是单写.dropdown-menu - 是否误用了
!important，结果被 Bootstrap 内联样式或插件注入的样式反杀
真正容易被忽略的，是那些没报错、没警告、DOM 结构也完全正确的“静默失效”——它往往卡在 CSS 层叠的毫厘之间，而不是 JS 初始化那一步。
