Bootstrap 5 原生不支持 Megamenu，需手动实现结构、CSS 与无障碍支持：避免嵌套 dropdown-item，用 static 定位+网格布局；修复定位参考系；小屏改垂直堆叠；禁用 Popper 翻转；点击链接自动收起；慎用 JS 初始化，优先 data 属性；重点处理键盘导航、焦点管理与触控兼容性。
Bootstrap 5 原生不支持 Megamenu，得自己加结构和 CSS
bootstrap 官方 navbar 组件只支持单层下拉（dropdown-menu），所谓 megamenu 是指横向展开、多列、带标题/图标/链接分组的大型下拉面板。它不在 navbar 默认能力范围内，强行用 dropdown-menu 堆砌容易错位、响应式失效、键盘导航断裂。
实操建议：
- 放弃把 Megamenu 塞进
dropdown-item—— 它会强制加padding和display: block，破坏网格布局 - 把 Megamenu 内容放在
dropdown-menu根节点下，但用position: static+width: 100%覆盖默认定位逻辑 - 用
container-fluid或row/col直接组织内容，别套dropdown-item - 必须手动加
aria-expanded和aria-haspopup="menu"，否则屏幕阅读器无法识别这是可展开菜单
下拉区域超出视口时，Megamenu 容易被裁切或错位
常见现象：鼠标悬停后 Megamenu 只显示顶部一截，或者整个面板向左/右偏移，甚至消失。根本原因是 dropdown-menu 默认用 position: absolute + top: 100%，而父容器（如 navbar-nav）没设 position: relative，导致定位参考系错误。
实操建议：
- 给触发按钮的直接父级（通常是
li）加position: relative - 对
dropdown-menu加left: 0和right: 0，防止因父容器 padding 导致水平偏移 - 用
@media (max-width: 991.98px)把 Megamenu 改为垂直堆叠（flex-column），避免小屏溢出 - 禁用 Popper 的自动翻转（
data-bs-popper="none"），改用固定方向：data-bs-display="static"配合手动定位
移动端点击展开后，无法点击内部链接或关闭菜单
典型错误：在手机上点开 Megamenu，点任意链接没反应；或者点了链接页面跳转了，但菜单没收起，下次再点就失效。这是因为 Bootstrap 的 dropdown 插件默认只监听 click 在 toggle 按钮上，不会自动关闭菜单，也不代理子元素事件。
实操建议：
- 给 Megamenu 内部所有
a标签加data-bs-toggle="dropdown"—— 这会让点击时自动触发收起 - 或者监听
click事件，在 JS 中调用bootstrap.Dropdown.getInstance(el).hide() - 避免在 Megamenu 内使用
router-link（Vue）或Link（React）包裹整块区域，容易拦截原生 click 行为 - 测试真机触控区域：确保
dropdown-menu的min-height不为 0，否则 iOS Safari 可能判定不可点击
用 JavaScript 初始化 Megamenu 时，容易忽略 Popper 依赖冲突
如果你手动 new bootstrap.Dropdown，但页面里同时用了其他 Popper v2 库（比如某些图表组件），会出现 Popper is not a constructor 错误，或下拉位置完全错乱。Bootstrap 5.3+ 内置 Popper，但它的 Dropdown 构造函数仍会尝试读取全局 Popper，一旦被覆盖就会崩。
实操建议：
- 优先用 data 属性初始化：
data-bs-toggle="dropdown"，不写 JS —— 最稳 - 如果必须 JS 控制，用
bootstrap.Dropdown.getOrCreateInstance()，而不是new bootstrap.Dropdown() - 确认没有重复引入 Popper：
console.log(window.Popper)，若存在且不是Object类型，删掉第三方引入 - Webpack/Vite 项目中，在
resolve.alias里把@popperjs/core指向 Bootstrap 自带副本，避免多份
