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>
