Bootstrap 5 默认禁用 hover 触发下拉菜单，仅支持 click 和 focus，以保障移动端兼容性与可访问性；如需 hover 效果，须用 JavaScript 结合 matchMedia 判断精细指针设备后调用 show()/hide() 方法。
Bootstrap 5 默认不支持 hover 触发下拉菜单
bootstrap 5 官方移除了对 :hover 触发下拉菜单的支持，只保留点击（click）和键盘焦点（focus）两种方式。这是故意为之——为了移动端兼容性和可访问性（a11y），避免悬停在触摸设备上失效或误触发。
如果你在桌面端明确需要 hover 效果，得自己补逻辑，不能指望 data-bs-toggle="dropdown" 自动响应鼠标移入。
用 CSS + JavaScript 补 hover 行为（推荐方案）
纯 CSS 方案（如直接给 .dropdown:hover .dropdown-menu 加 display: block）看似简单，但会破坏键盘导航、屏幕阅读器支持，且在移动端可能引发意外展开。稳妥做法是用 JS 模拟行为，同时保留原生 focus/click 路径。
- 监听
mouseenter和mouseleave，仅对非触摸设备生效（用matchMedia("(hover: hover) and (pointer: fine)")判断） - 手动调用 Bootstrap 的
show()/hide()方法，而不是直接操作 DOM 类名 - 必须排除触摸设备，否则 iOS/Android 上手指划过会误触发，且无法关闭
- 要加防抖：快速进出时避免反复 show/hide 导致闪烁
示例片段：
document.querySelectorAll('.dropdown').forEach(dropdown => {
const bsDropdown = bootstrap.Dropdown.getInstance(dropdown);
if (!bsDropdown) return;
const isFinePointer = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
if (!isFinePointer) return;
dropdown.addEventListener('mouseenter', () => bsDropdown.show());
dropdown.addEventListener('mouseleave', () => setTimeout(() => {
if (!dropdown.matches(':hover')) bsDropdown.hide();
}, 50));
});
为什么不用纯 CSS .dropdown:hover .dropdown-menu？
这个写法在 Chrome/Firefox 桌面端确实能“看起来”工作，但它绕过了 Bootstrap 的状态管理，带来几个硬伤：
- 下拉菜单失去
aria-expanded属性同步，屏幕阅读器无法感知开闭状态 - 键盘用户按
Tab进入下拉项时，菜单可能已因 hover 关闭，导致焦点丢失 - 移动端 Safari 中，第一次轻点会触发 hover（伪类激活），但第二次才真正 click，造成体验混乱
- 如果页面有多个嵌套下拉，CSS hover 无法处理层级收起逻辑（比如移出 A 下拉时，B 下拉不该自动展开）
Bootstrap 4 用户注意 class 名和 JS API 差异
如果你还在用 Bootstrap 4，JS 初始化方式不同，且默认支持 hover（但已被标记为 deprecated）；升级到 5 后，$.fn.dropdown.Constructor 变成 bootstrap.Dropdown，data-toggle 改为 data-bs-toggle，这些不匹配会导致 JS 报错 Cannot read property 'show' of null。
- 确认你引入的是 Bootstrap 5 的 JS 文件（含
bootstrap.bundle.min.js或单独popper+bootstrap） - 检查元素是否已有
bootstrap.Dropdown实例，别重复初始化 - 如果用了 jQuery，不要混用
$().dropdown('show')—— Bootstrap 5 不再依赖 jQuery
hover 行为不是开关，而是权衡：它让桌面导航更顺滑，但也要求你主动维护可访问性和跨端一致性。漏掉 matchMedia 判断或忽略焦点逻辑，问题往往出现在上线后被真实用户反馈出来。
