不能只用col-md-3+d-none d-sm-block做侧边栏，因其仅视觉隐藏而dom仍在文档流中占位，导致主内容高度异常、滚动错乱、键盘导航跳过、屏幕阅读器可读；offcanvas才是bootstrap 5官方推荐方案，通过transform临时移出流并自动添加aria-hidden="true"和inert，保障无障碍与动画稳定性。
为什么不能只用 col-md-3 + d-none d-sm-block 做侧边栏
这种写法在小屏下看似隐藏了侧边栏，但 DOM 仍在文档流中占位。结果是：主内容区高度计算异常、滚动条错乱、键盘导航跳过菜单、屏幕阅读器仍可读取——它只是“看不见”，不是“不存在”。offcanvas 才是 Bootstrap 5 官方推荐的语义级隐藏方案，它把侧边栏临时移出流，用 transform: translateX() 推入视口，同时自动加 aria-hidden="true" 和 inert，无障碍和 JS 动画都更稳。
offcanvas 和固定侧边栏在桌面端怎么共存
桌面端要常驻侧边栏，移动端才弹出 offcanvas，必须用两套结构，不能混用：
- 常驻栏写在
div class="d-none d-lg-block"里，用position: sticky或position: fixed固定； - offcanvas 写在另一个
div class="d-lg-none"里，id必须和触发按钮的data-bs-target完全一致（大小写敏感）； - 别给 offcanvas 元素额外加
sidebar这类自定义 class，尤其别带float、width或position: relative，会直接破坏 transform 定位逻辑； - 定制宽度统一用 CSS 变量：
style="--bs-offcanvas-width: 280px;"，别手动改width或max-width。
侧边栏固定失效时该怎么排查
position: sticky 在 Bootstrap 里特别容易悄无声息地失效。常见原因有：
- 父容器（比如
.row）设了overflow: hidden或transform（offcanvas、navbar-sticky-top 都会触发）； - 用了 flex-column 布局但没给侧边栏加
flex-shrink: 0，浏览器压缩它导致塌缩； - iOS Safari 对 flex 容器内的 sticky 支持不稳定，得加
@supports (position: sticky)降级； - z-index 被 navbar（默认 1030）或 offcanvas（默认 1140）盖住，侧边栏至少设
z-index: 1150。
一旦 sticky 失效，回退到 position: fixed 是可行路径，但必须同步处理：margin-left 主内容区、加 max-height: calc(100vh - 2rem) 和 overflow-y: auto，否则长菜单直接溢出视口。
多级菜单展开为什么总“连带展开”
原生 Bootstrap 的 collapse 不支持嵌套层级独立控制。你用同一个 data-bs-target 指向多个 .collapse，点一级，所有二级全开——这不是 bug，是设计如此。真要逐级折叠，必须放弃纯 HTML 触发，改用 JS 实例化：
- 每个子菜单
<div class="collapse"> 单独 new 一个 <code>bootstrap.Collapse实例； - 监听父级按钮 click，手动调
instance.show()或instance.hide()； - 移动端（
max-width: 768px）强制收起所有子菜单，否则侧边栏撑出屏幕； - 过渡动画别只依赖
height，对不定高内容，必须用max-height+overflow: hidden控制。
最易被忽略的是：offcanvas 展开后，主内容区必须设 min-height: 100vh，否则页面会塌陷——这个细节在文档里不显眼，但线上项目一上就出问题。
