Bootstrap 5需结合offcanvas实现真响应式侧边栏：桌面端用col-md-3/col-md-9布局，移动端用offcanvas隐藏侧边栏并触发展开，避免仅靠d-none/d-sm-block导致的DOM占位与无障碍问题。
用 Bootstrap 5 的 col-* + offcanvas 实现真响应式侧边栏
bootstrap 5 自带的栅格系统本身不直接支持“固定侧边栏+主内容自适应”这种经典布局，硬套 col-3 col-9 在小屏下会挤成一行且无法收起——必须配合 offcanvas 才算完整响应式。关键不是“怎么分栏”，而是“小屏时侧边栏去哪儿、怎么触发、怎么不影响主内容流式布局”。
常见错误是只写 col-md-3 col-md-9，结果手机上侧边栏堆在顶部、遮挡内容、点击无反应。这不是栅格写错了，是没处理移动端交互逻辑。
- 桌面端（
md及以上）：用col-md-3固定侧边栏宽度，col-md-9主内容自动撑满剩余空间 - 移动端（
sm及以下）：侧边栏默认隐藏，用offcanvas包裹，通过按钮触发展开 - 主内容区域加
min-height: 100vh防止 offcanvas 展开后页面塌陷
为什么不能只靠 col-sm-* 控制显隐
因为 col-sm-3 在小屏下依然会渲染 DOM 并占位，即使设 display: none，也可能导致父容器高度计算异常、滚动条错乱或焦点管理失效。Bootstrap 官方推荐方案就是 offcanvas ——它把侧边栏从文档流中临时移出，只在需要时用 transform 推入视口，不干扰主内容流式渲染。
典型错误现象：col-sm-3 d-none d-sm-block 看似隐藏了，但实际 DOM 还在，JS 动画卡顿、键盘导航跳过侧边栏、屏幕阅读器仍可读取。
-
d-none d-sm-block是视觉隐藏，不是语义/布局隐藏 -
offcanvas默认使用aria-hidden="true"和inert属性，符合无障碍要求 - 如果项目需兼容 IE11，
offcanvas不可用，得降级为 JS 控制position: fixed+ 手动管理 tabindex
offcanvas 和 sidebar 类名别混用
Bootstrap 5 没有内置 sidebar 组件，所有叫 “sidebar” 的 class 都是自定义样式。一旦你写了 class="sidebar" 却没配 CSS，或者和 offcanvas 的定位规则冲突（比如给 offcanvas 加了 position: relative），就会导致侧边栏错位、背景遮罩不显示、关闭按钮失灵。
错误示例：<div class="offcanvas offcanvas-start sidebar"> —— <code>sidebar 这个 class 如果定义了 width: 250px 和 float: left，会直接破坏 offcanvas 的 transform 定位逻辑。
- 只保留
offcanvas及其变体类（offcanvas-start/offcanvas-end） - 定制宽度用
style="--bs-offcanvas-width: 280px;"，别改width或max-width - 关闭按钮必须是
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>，手写×或用onclick会丢失键盘关闭支持
主内容区域要防“被 offcanvas 压住”
很多人把 offcanvas 放在 最后，以为就万事大吉。其实 offcanvas 的 z-index 默认是 1200，而 navbar 是 1040，如果主内容里有 position: relative 且 z-index 设到 1100，就会盖住 offcanvas 背景遮罩，导致点不到关闭按钮。
更隐蔽的问题：offcanvas 展开时，主内容区域若用了 overflow: hidden（比如某些轮播图组件），会导致页面无法滚动，用户卡死。
- 检查主内容容器是否意外设置了
z-index> 1199 - offcanvas 触发按钮建议放在 navbar 内，而不是侧边栏内部（否则小屏下按钮不可见）
- 测试时务必用真机或 Chrome DevTools 的 “Mobile view + touch simulation”，仅靠缩放窗口会漏掉触摸事件问题
