侧边栏小屏下必须用offcanvas而非d-none/d-sm-block：后者仅视觉隐藏，DOM仍占位，导致滚动异常、键盘焦点跳过、屏幕阅读器误读；正确做法是桌面端用col-md-3/col-md-9，移动端用offcanvas-start完全剥离DOM流并确保焦点管理。
侧边栏在小屏下必须用 offcanvas，不能只靠 d-none/d-sm-block
直接写 col-md-3 d-none d-sm-block 看似隐藏了侧边栏，但 DOM 仍在、占位还在，会导致三个实际问题：页面滚动异常、键盘焦点跳过侧边栏内容（违反 WCAG 可访问性）、屏幕阅读器仍会朗读隐藏区域。这不是“看起来没显示”就完事了，而是交互和语义层面的失效。
正确路径是桌面端保留 col-md-3 + col-md-9 栅格，移动端完全剥离侧边栏 DOM 流，改用 offcanvas 控制显隐：
- 侧边栏容器加
class="offcanvas offcanvas-start"和id="sidebar" - 主内容区外层包裹
div class="offcanvas-body"（注意不是直接套在main上） - 触发按钮必须是
<button type="button" class="btn-close" data-bs-dismiss="offcanvas">，手写×或用onclick会丢掉 ESC 键关闭和屏幕阅读器支持 - 主内容区域建议加
style="min-height: 100vh;"，否则 offcanvas 展开后可能因高度塌陷导致底部留白或滚动错乱
offcanvas 与自定义 sidebar 类名冲突时定位错乱
很多人给侧边栏同时加 class="sidebar offcanvas offcanvas-start"，再配一段自定义 CSS 比如 .sidebar { position: fixed; top: 0; left: 0; }，结果 offcanvas 背景遮罩不出现、关闭按钮失灵、滑入动画卡顿——这是因为 Bootstrap 的 offcanvas 默认依赖 position: absolute 和父容器 position: relative 的配合，你强行塞进 fixed 会破坏它的渲染上下文。
解决办法只有两个方向：
- 彻底放弃自定义
sidebar类，所有样式通过offcanvas自带类扩展，比如用offcanvas-sm控制断点，用offcanvas-title做标题样式 - 如果必须保留自定义类，请移除所有影响定位的声明（
position、top、left、z-index），改用offcanvas提供的 data-bs-* 属性控制行为，例如data-bs-scroll="true"允许背景滚动
为什么不用 jQuery 实现 toggle 动画替代 offcanvas
有人习惯用 $(".sidebar").slideToggle() 或 .animate({width: "toggle"}) 手动控制侧边栏收放，短期能跑通，但长期会暴露三类硬伤：
- 无法响应系统级交互：比如用户用键盘按 ESC 关闭、用手指从屏幕边缘滑入触发（iOS Safari）、或辅助技术要求的 ARIA 状态同步（
aria-expanded、aria-controls）全得自己补 - 动画性能差：jQuery 的
animate基于 JS 定时器 + 重排重绘，而offcanvas底层用的是 CSStransform+transition，GPU 加速更稳 - DOM 生命周期失控：手动 show/hide 不会自动销毁/重建事件监听器，容易造成内存泄漏，尤其在单页应用中反复切换路由时
除非你项目明确禁用 Bootstrap JS（只用 CSS），否则别绕开 offcanvas 自己造轮子。
交互体验上最易被忽略的细节：键盘焦点管理
offcanvas 展开后，焦点默认不会自动跳进侧边栏，用户按 Tab 仍从页面顶部开始循环；关闭后，焦点也不会自动回到触发按钮——这会让键盘用户迷失操作位置。Bootstrap 5.3+ 默认不处理这个，必须手动补：
- 监听
shown.bs.offcanvas事件，在回调里调用document.getElementById("sidebar").querySelector("button, a, input").focus() - 监听
hidden.bs.offcanvas，把焦点设回触发按钮：triggerBtn.focus() - 确保侧边栏内部可聚焦元素有合理顺序（用
tabindex控制，避免tabindex="999"这种反模式）
这个点没有视觉反馈，测试时容易漏，但对真实残障用户就是不可用和可用的分界线。
