Bootstrap 5真响应式侧边栏必须用offcanvas实现：桌面端用col-md-3/col-md-9布局，移动端用offcanvas移出文档流，避免DOM占位、无障碍失效及动画卡顿；伪响应式col-sm-3+d-none仅视觉隐藏，不解决语义与交互问题。
Bootstrap 5 的响应式侧边栏不能只靠 col-md-3 + col-md-9 实现真响应式——小屏下必须用 offcanvas 把侧边栏从文档流中移出，否则 DOM 占位、无障碍失效、JS 动画卡顿全是连带问题。
为什么 col-sm-3 d-none d-sm-block 是伪响应式
它只是视觉隐藏：DOM 仍渲染、仍占空间、仍可被键盘焦点进入、屏幕阅读器仍会读取。常见错误现象包括：
- 主内容区滚动错乱（因隐藏的
col-sm-3拉高了父.row高度） - 点击 offcanvas 触发按钮后，背景遮罩不显示（
d-none干扰了offcanvas的aria-hidden切换逻辑） - 移动端双指缩放时，侧边栏区域意外触发横向滚动
根本原因：栅格系统本质是弹性布局工具，不是交互容器。显隐控制必须交由语义明确、行为受控的组件处理——offcanvas 就是 Bootstrap 5 官方指定的解法。
桌面端固定宽度 + 移动端 offcanvas 的正确组合写法
关键不是“怎么分栏”，而是“侧边栏在不同断点下的存在方式”。正确结构需满足三件事：
- 桌面端（
md及以上）：div.col-md-3作为侧边栏容器，宽度由栅格控制；div.col-md-9为主内容，自然流式撑开 - 移动端（
sm及以下）：侧边栏用div.offcanvas.offcanvas-start包裹，完全脱离文档流；触发按钮放在主内容区顶部或 navbar 中 - 主内容区加
min-height: 100vh（CSS 写死或用style="min-height: 100vh;"），防止 offcanvas 展开后页面塌陷、底部留白
示例片段（仅结构）：
<div class="container-fluid">
<div class="row g-0">
<!-- 桌面端可见，移动端隐藏 -->
<div class="col-md-3 d-md-block d-none">...侧边栏内容...</div>
<pre class='brush:php;toolbar:false;'><!-- 主内容区（含 offcanvas 触发按钮）-->
<div class="col-md-9" style="min-height: 100vh;">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar">
菜单
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar">
<div class="offcanvas-header">
<h5 class="offcanvas-title">导航</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">...侧边栏内容...</div>
</div>
<!-- 主内容正文 -->
</div></div> </div>
自定义宽度和兼容性避坑点
offcanvas 默认宽度是 400px，但不能直接写 width: 280px 或改 max-width ——这会破坏 transform 定位逻辑。应使用 CSS 变量：
- 设置宽度：
<div class="offcanvas offcanvas-start" style="--bs-offcanvas-width: 280px;"> - 别混用自定义 class：
class="offcanvas offcanvas-start sidebar"中的sidebar如果带float、position: relative或width，会直接导致 offcanvas 错位或遮罩不生效 - IE11 不支持
offcanvas（依赖transform和inert），需降级：用position: fixed+ 手动管理tabindex和aria-hidden
另外，offcanvas 的关闭按钮必须是 <button type="button" class="btn-close" data-bs-dismiss="offcanvas">，手写 × 或用 onclick 绑定 JS 关闭，会导致 aria-hidden 同步失败、键盘 Esc 失效。
固定定位左栏 + 右侧滚动的替代方案（非 offcanvas 场景）
如果项目要求侧边栏始终可见（如后台管理），且右栏需独立垂直滚动，就不能用栅格列控制高度——.col-* 是弹性子项，overflow 在其上无效。正确做法是：
- 左栏用
position: fixed+top-0 start-0 h-100+overflow-y-auto（内部滚动） - 右栏用
ms-md-3（margin-start在md断点后生效）预留空间，避免被遮挡 - 整个布局外层加
m-0 p-0清除.row和.container-fluid的默认边距/内边距，否则 fixed 元素会偏移 - 左栏宽度别依赖
col-md-3，改用w-25或style="width: 260px;"更可控
这种方案绕开了 offcanvas，但失去了移动端收起能力——它适合“全屏管理后台”类场景，而非通用响应式页面。
最常被忽略的其实是 min-height: 100vh 和 inert 属性的行为一致性：前者保证 offcanvas 展开时不塌内容，后者决定键盘焦点是否能进入隐藏态侧边栏。这两个点一旦漏掉，用户用键盘或屏幕阅读器操作时，体验就断了。
