Bootstrap 5 官方推荐用 offcanvas 实现真响应式左侧导航：桌面端固定显示，移动端滑入展开且不干扰主内容流；需禁用 position: relative 和自定义 width，改用 --bs-offcanvas-width 变量控制宽度，关闭按钮必须为带 data-bs-dismiss 的 btn-close 元素。
Bootstrap 5 中用 offcanvas 实现真响应式左侧导航
只靠 col-md-3 + col-md-9 写不出可用的响应式左侧导航——小屏下侧边栏会堆在顶部、占位、遮挡内容、键盘焦点混乱。必须用 offcanvas 把它从文档流中临时移出，这才是 Bootstrap 5 官方推荐路径。
桌面端（md 及以上）：侧边栏固定显示，主内容自适应宽度
移动端（sm 及以下）：侧边栏默认隐藏，点击按钮以滑入方式展开，不干扰主内容流式渲染
-
offcanvas默认使用aria-hidden="true"和inert，屏幕阅读器不可见、键盘不可聚焦，无障碍达标 - 别给
offcanvas加position: relative或自定义width—— 会破坏 transform 定位逻辑 - 宽度定制统一用 CSS 变量：
style="--bs-offcanvas-width: 280px;" - 关闭按钮必须是
<button type="button" class="btn-close" data-bs-dismiss="offcanvas">，手写 × 或用 JS 移除 class 都不可靠
左侧固定导航 + 右侧独立滚动（后台类页面常用）
这不是 offcanvas 场景，而是「左栏静止、右栏滚动」的经典管理后台布局。关键不是让左栏“响应式”，而是让它脱离文档流、精准锚定，并给右栏留出安全间距。
常见错误是直接对 .col-2 加 overflow-y-auto——因为 .col-* 是弹性子项，父容器 .row 没有定位上下文，overflow 完全无效。
- 左栏加
position-fixed start-0 top-0 h-100，再用w-25或style="width: 260px"控制宽度 - 右栏必须加
ms-md-3（margin-starton md+），不能只靠col-md-9——否则大屏下内容会被固定左栏遮住 - 外层容器要加
m-0 p-0清掉.row和.container-fluid的默认边距，否则固定定位偏移 - 左栏内部若菜单过长，加
overflow-y-auto；右栏滚动由自身内容自然触发，无需额外设置
多级折叠菜单在移动端自动收起
Bootstrap 原生 collapse 不支持嵌套层级独立控制：点开一级，所有 data-bs-target 相同的二级也跟着展开。这不是配置问题，是设计限制。
真正能跑通的方案只有一条：用 JS 手动管理每级 collapse 实例的状态，并在视口缩小时强制收起全部子菜单。
- 每个子菜单用唯一 ID，例如
id="submenu-user"，对应按钮的data-bs-target="#submenu-user" - 监听
resize事件，在window.innerWidth < 768时遍历所有.collapse.show元素，调用其hide()方法 - 桌面端建议默认只展开当前激活路径（比如当前页面是 /user/profile，则展开 User → Profile），避免信息过载
- 别用
data-bs-toggle="collapse"套娃嵌套——它没有父子联动机制，JS 手动接管才是唯一稳定解法
图标模式侧边栏：窄宽下只显示图标
Bootstrap 没有内置“图标模式”开关，所谓图标模式，本质是用 list-group 结构 + CSS 尺寸重置 + flex 居中实现的视觉压缩。很多人卡在以为要改类名，其实核心是结构和样式微调。
典型宽度场景是侧边栏压到 80px 左右，文字完全隐藏，只留图标垂直排列。
- 必须用
<button>或<a>包裹图标（如<i class="bi bi-house"></i>），否则语义错误、无点击区域、无障碍失败 - 禁用
list-group-item默认padding和line-height，改用padding: 0.75rem 0+display: flex; align-items: center; justify-content: center; - 图标统一用
fs-4或font-size: 1.25rem，Font Awesome 用户务必加fa-fw保证等宽对齐 - 需要 hover 显示文字？用
flex-column+text-center+:hover .text控制显隐，别用collapse或 DOM 切换
最易被忽略的是：offcanvas 的 tabindex="-1" 和 fixed 定位的 start-0 top-0 必须同时存在且不冲突；一旦混用自定义 class（比如 sidebar）覆盖了 offcanvas 的定位规则，整个交互就失效了——这种错不在 JS，而在 HTML 结构和 CSS 优先级里。
