Bootstrap导航栏不支持内置双层导航，实际需通过顶部navbar+侧边nav.flex-column（桌面）与offcanvas（移动端）组合实现，二者DOM独立、状态分离、无障碍合规。
Bootstrap 导航栏本身不支持“双层导航”这个概念——它没有内置的双层结构（比如上导航栏 + 侧边栏联动控制、或一级导航栏 + 独立二级工具栏）。所谓双层，实际是两种常见布局组合：顶部固定导航栏 + 左/右侧垂直导航栏（常称侧边栏），或顶部主导航 + 页面内功能子导航。实现的关键不是找一个 class，而是拆解 DOM 结构与响应式策略。
用 navbar + offcanvas 实现真可用的双层（顶部+侧边）
很多教程用 col-md-3 d-none d-lg-block 把侧边栏硬塞进同一行，结果移动端 DOM 还在、tab 键能聚焦、屏幕阅读器会读、offcanvas 遮罩不生效——这不是双层，是视觉错觉。
- 桌面端：顶部用
navbar，侧边用nav.flex-column放在col-lg-2栅格里，配合sticky-top或position-sticky - 移动端：把整套侧边栏移入
offcanvas offcanvas-start d-lg-none，用独立按钮触发（不能复用 navbar-toggler） - 必须手动控制 offcanvas 的
aria-hidden和tabindex，否则键盘用户无法跳过 - 不要给侧边栏加
data-bs-toggle="dropdown"—— 它不是下拉菜单，是独立导航流
避免在 navbar 内嵌套二级 navbar
有人试图这样写：<nav class="navbar"><nav class="navbar">...</nav></nav>。这会导致：
- CSS 层叠错误：子
navbar的margin、padding、z-index全部失效 - JS 行为冲突：两个
navbar-collapse共享同一个data-bs-targetID 时，点击一个会同时展开/收起两个 - 无障碍问题：嵌套
nav会让屏幕阅读器误判为“导航中的导航”，语义混乱 - 正确做法是：顶部一层用
navbar，下方区域用nav.nav-tabs或nav.nav-pills作为子导航，二者无父子关系，只是视觉上下排列
多级下拉 ≠ 双层导航，别混用
如果你实际想要的是“一级导航项点击后弹出二级菜单”，那属于 dropdown 扩展，不是双层导航。Bootstrap 5 默认禁用 dropdown-menu 嵌套，因为：
-
data-bs-toggle="dropdown"不会自动初始化子级.dropdown - 移动端点击任意项，整个 dropdown 立即收起（包括刚点开的子菜单）
- 纯 CSS 强行
display: block会导致定位偏移、popper失效、键盘导航不可用 - 真要实现，得用自定义 JS 拦截
click并e.stopPropagation()，再手动切.show类——但这和“双层导航”无关
最易被忽略的点：双层结构中，两套导航的激活状态（active）、滚动行为、焦点管理必须独立控制。比如侧边栏展开时，顶部 navbar 的 fixed-top 不能遮挡其内容；offcanvas 关闭后，焦点必须回到触发按钮而非页面顶部。这些不是加个 class 能解决的，得靠事件监听和显式 DOM 操作。
