抽屉菜单应使用Bootstrap的offcanvas组件而非不存在的sidebar；需配合data-bs-toggle和data-bs-target触发，容器加offcanvas-start/end类，图标手动添加，菜单项用list-group+d-flex对齐，响应式需组合工具类，点击后需data-bs-dismiss="offcanvas"自动关闭。
抽屉菜单用 offcanvas 而不是 sidebar 或 drawer
bootstrap 5.2+ 原生不提供 sidebar 组件，所谓“侧边抽屉菜单”实际是 offcanvas，它默认从左侧滑入，支持响应式断点控制。别在文档里搜 sidebar——根本不存在，硬套 class 会失效。
关键点：offcanvas 必须配合 data-bs-toggle="offcanvas" 和 data-bs-target（或 href）触发；容器需有 offcanvas-start（左抽）或 offcanvas-end（右抽）；图标需手动添加，Bootstrap 不内置菜单图标。
-
offcanvas默认只在sm及以下生效，想在桌面端也显示？得删掉offcanvas-sm类，或改用offcanvas-lg等断点类 - 图标要用
<i></i>或<svg></svg>手动插入，比如 Font Awesome 的<i class="fa-solid fa-bars"></i>，Bootstrap Icons 也行，但得额外引入 CSS - 别把
offcanvas-body直接塞进navbar—— 它会破坏 navbar 的 flex 布局，正确做法是让offcanvas和navbar同级，用绝对定位或 z-index 控制层级
图标和菜单项对齐要靠 list-group + d-flex
纯用 ul/li 很难让图标和文字垂直居中对齐，尤其在小屏幕下容易错位。Bootstrap 的 list-group 配合 d-flex align-items-center 是最稳的组合。
常见错误：给 li 加 text-center 或 mx-auto，结果图标偏上、文字下沉。这不是 margin 问题，是行高与字体基线不一致导致的。
- 每个菜单项用
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center"></a> - 图标放左边，加
me-2；文字用<span></span>包裹，避免换行干扰 - 如果图标是 SVG，记得设
height="1.25rem"和width="1.25rem"，不然在移动端可能被压缩变形 - 选中态用
activeclass 即可，list-group-item-action已包含 hover/focus 样式
响应式断点控制：何时隐藏，何时保留
想“桌面显示侧边栏、手机变成抽屉”？Bootstrap 的 offcanvas 默认反着来——它只在小屏显示，大屏隐藏。要反转逻辑，得组合使用显示/隐藏工具类。
典型方案：在 lg 及以上显示常驻侧边栏（用 col-lg-2），同时对 offcanvas 添加 d-none d-lg-block；小屏则只留按钮触发抽屉，侧边栏本身设为 d-lg-none。
- 别试图用 JS 动态切换
offcanvas的showclass 来模拟常驻栏——它会丢失动画、键盘焦点管理，且无法响应窗口 resize - 如果必须全尺寸都用抽屉（比如后台管理），那就只保留
offcanvas，并在navbar里放一个btn btn-sm btn-primary d-lg-none作为触发按钮 -
offcanvas-backdrop默认开启，若不想遮罩层影响背景内容，加data-bs-backdrop="false"
点击菜单项后自动关闭抽屉的坑
offcanvas 不像 modal，默认点击内部链接不会自动关闭。很多人写完菜单发现点了没反应，其实是没手动关。
最简方案是加一行 JS：监听 click，找最近的 data-bs-dismiss="offcanvas" 元素，或者直接调 bootstrap.Offcanvas.getInstance() 的 hide() 方法。
- 推荐在每个菜单
<a></a>上加data-bs-dismiss="offcanvas"，它会自动触发关闭，无需 JS - 如果菜单项是用
router-link（Vue）或Link（React），data-bs-dismiss可能被拦截，此时得在路由跳转回调里手动调instance.hide() - 注意：加了
data-bs-dismiss后，链接的href="#home"仍会触发页面跳转，如需单页应用行为，记得event.preventDefault()或用javascript:void(0)
真正麻烦的是嵌套路由或动态菜单——图标路径、激活状态、关闭逻辑得一起联动，这时候光靠 Bootstrap 的 data-api 就不够了，得封装个 hook 或指令。
