下拉菜单被 .dropdown-backdrop 遮挡的主因是其默认 position: fixed 导致在部分移动端浏览器中渲染层级异常；应改用 .dropdown-backdrop { position: static !important; }，禁用 display: none 以免破坏关闭逻辑。

下拉菜单被 .dropdown-backdrop 遮挡（移动端高频问题）

Bootstrap 在移动端展开下拉时会自动插入一个

，默认是 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 就无法再控制显隐逻辑。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

更隐蔽的是 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 之后加载（查看页面源代码中的 顺序）
• 有没有用 .dropdown .dropdown-menu 这类组合选择器提权，而不是单写 .dropdown-menu
• 是否误用了 !important，结果被 Bootstrap 内联样式或插件注入的样式反杀

真正容易被忽略的，是那些没报错、没警告、DOM 结构也完全正确的“静默失效”——它往往卡在 CSS 层叠的毫厘之间，而不是 JS 初始化那一步。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！