Bootstrap下拉菜单点击没反应90%是JS未运行，非CSS问题；必须用bootstrap.bundle.min.js（含Popper），检查data-bs-toggle、CDN截断、jQuery混入、navbar-collapse的id匹配等。
CSS本身不能修复Bootstrap 5下拉菜单点击失效
点击没反应，90%不是CSS问题，而是JavaScript根本没跑起来。CSS只能控制样式呈现，无法绑定事件、计算定位或切换show类——这些全靠bootstrap.bundle.min.js里的Dropdown插件完成。强行用.dropdown-menu { display: block !important }只会让菜单“硬显示”，但位置错乱、不随滚动移动、无障碍属性缺失、移动端点不收起，反而引入新问题。
哪些CSS改动会直接导致点击失效或行为异常
看似只是样式调整，实则可能拦截交互或破坏Bootstrap的JS依赖逻辑：
-
.dropdown-menu { pointer-events: none }：彻底禁用所有鼠标事件，点击完全无响应 -
.dropdown { position: static }：移除相对定位后，Popper无法将.dropdown-menu锚定在触发器下方，JS虽执行但菜单渲染到页面左上角或消失 -
.dropdown-toggle { display: inline-flex }配合flex-direction: column：可能使offsetParent计算错误，Popper定位失败，菜单不展开 - 父容器设了
overflow: hidden且高度不足：菜单被裁剪，视觉上“没出来”，实际已渲染但不可见 - 自定义
z-index层级混乱：菜单被其他元素遮挡，点击区域被覆盖，触控/鼠标事件无法到达触发器
真正该检查的CSS相关线索
当怀疑是CSS干扰时，别改样式，先验证是否被覆盖或阻断：
- 打开开发者工具，选中触发按钮，在
Computed面板里搜pointer-events，确认值是auto - 检查
.dropdown父容器的position是否为relative（Bootstrap默认加，但自定义CSS可能重置） - 点击后看
.dropdown-menu元素上是否动态添加了show类和style="display: block;"——没有就说明JS没生效，跟CSS无关 - 临时禁用所有自定义CSS文件，只留Bootstrap官方CSS+JS，再测试；若恢复，则逐个启用定位冲突源
移动端下拉菜单“展开但不关闭”的CSS诱因
这常被误认为JS失效，其实是CSS与事件机制耦合出的问题：
立即学习“前端免费学习笔记（深入）”；
-
.dropdown-menu设置了transform: translateY(-5px)等偏移：Popper定位后又被CSS二次偏移，导致document级点击关闭监听判定“点击发生在菜单外”，不触发隐藏 - 媒体查询中对
.navbar-collapse设了position: fixed但未配top/z-index：折叠后菜单定位参考点丢失，JS仍尝试按原逻辑展开，结果溢出视口顶部 - 用
height: 0; overflow: hidden做折叠动画，却忘了在.dropdown-menu.show里重置height: auto：菜单有show类但被高度截断，看起来“没显示”
这类问题最麻烦的地方在于：控制台没报错，DOM里能看到show类，但用户就是看不到、点不关——得盯着Computed里的display、visibility、height和transform连环查。
