应使用 offcanvas 而非 d-none d-sm-block：前者通过 transform 移出视口并添加 aria-hidden="true" 和 inert，确保语义移除与无障碍支持；后者仅隐藏视觉但 DOM 仍占位，导致布局错乱与可访问性问题。
小屏下侧边栏该隐藏却还占位？别用 d-none d-sm-block
这是最常踩的坑：写 d-none d-sm-block 或 d-md-block d-lg-none，以为侧边栏“消失了”，结果手机上主内容被顶偏、滚动异常、键盘焦点跳过、屏幕阅读器仍能读到它。根本原因是 dom 还在文档流里，只是视觉藏了——display: none 不等于语义移除。
真正该做的是让侧边栏在小屏下「不渲染在主流中」。Bootstrap 5 官方方案是 offcanvas，它用 transform: translateX() 把元素临时推离视口，并自动加 aria-hidden="true" 和 inert，无障碍和动画都稳。
- 桌面端（≥768px）：用
col-md-3+col-md-9布局，侧边栏固定宽度，主内容自适应 - 移动端（offcanvas 里，通过按钮触发，不能靠栅格类控制显隐
-
offcanvas必须放在.container-fluid或同级位置，别嵌套在.col里，否则定位错乱
offcanvas 怎么配才不和 sidebar 样式冲突
很多人给 offcanvas 加自定义 class 如 sidebar，再配 width: 250px 和 float: left，结果侧边栏卡在左上角、遮罩不出现、关闭按钮失灵。这是因为 offcanvas 依赖绝对定位 + transform，你写的 float 或 position: relative 直接破坏它的渲染逻辑。
定制宽度只能用 CSS 变量：style="--bs-offcanvas-width: 280px;"。别碰 width、max-width 或 left/right；关闭按钮必须是原生写法：，手写 × 或 onclick 会丢键盘关闭支持。
- 删掉所有自定义 sidebar 类名，只保留
offcanvas offcanvas-start - 如果需要背景半透，加
bg-body-tertiary，别用bg-dark后再调 opacity，会干扰遮罩层 - offcanvas 内部的导航链接要加
tabindex="0"，否则键盘用户打不开子菜单
主内容区为什么一展开就塌陷或被盖住
常见现象：点开 offcanvas，主内容区域突然变矮、文字被遮、滚动条消失。这通常是因为主内容没设最小高度，或者 offcanvas 被放错了位置。
offcanvas 默认是 fixed 定位，z-index 较高，但它不该“压”主内容——主内容得自己撑开空间。关键就是加 min-height: 100vh，且这个样式必须作用在主内容的直接父容器上（比如 col-md-9 所在的 div）。
- offcanvas 元素建议放在
最末尾，避免被其他 flex 或 grid 容器干扰定位 - 主内容区不要用
height: 100%，它依赖父容器高度，而父容器可能没设 height；min-height: 100vh更可靠 - 如果用了
position: sticky的顶部导航，需确认其z-index高于 offcanvas 的遮罩层（默认是 1045），否则会被盖住
三栏布局里中间列想自适应？别混用 col 和 flex-grow
如果你的“三栏”不是简单等宽（比如左栏菜单、中栏内容、右栏工具面板），而是希望中间列吃掉所有剩余空间，col-4 col-4 col-4 就不够用了。Bootstrap 4/5 的 .col 类基于百分比，不响应剩余空间；flex-grow-1 才是正解——但不能和 .col 混用。
因为 .col 内部写了 flex: 0 0 auto，会覆盖你写的 flex-grow: 1。浏览器开发者工具里能看到它被划掉。
- 彻底放弃
.col，改用.d-flex .flex-row+.flex-shrink-0（左右栏）+.flex-grow-1（中间栏） - 左右栏用
style="width: 220px;"锁死，别用flex-basis，避免 IE11 下失效 - 小屏时想隐藏左右栏？叠加
d-none d-md-flex，而不是d-md-block，否则 flex 容器会崩
真正的难点不在怎么写代码，而在于分清「视觉隐藏」和「语义移出」——小屏下用户不需要看到侧边栏，更不需要它在后台抢焦点、占内存、干扰滚动。offcanvas 不是锦上添花的动效，它是响应式侧边栏的语义基础设施。
