移动端左右栏必须从文档流中彻底移除，不能仅用d-none等视觉隐藏；应采用offcanvas方案，通过transform移出视口并自动添加aria-hidden和inert，确保无障碍、焦点、布局和js行为正常。
移动端左右栏必须真正从文档流中移除，不能只靠 col-sm-12 或 d-sm-none 这类“视觉隐藏”——DOM 还在，就会干扰焦点、滚动、无障碍读取，甚至让 min-height: 100vh 计算异常。
为什么 d-none d-md-block 不够用
这个组合看似合理，但实际只触发 display: none，元素仍在 HTML 结构里，浏览器仍为其保留原始布局占位。常见后果包括：
- 键盘 Tab 导航跳过中间内容，或意外停在已“隐藏”的侧栏链接上
- 屏幕阅读器仍会读出侧栏文字（
aria-hidden没加，inert属性没生效） - 父容器高度被撑高，导致主内容区出现意外空白或滚动条错位
- JS 获取
offsetHeight或参与ResizeObserver时返回非零值，逻辑误判
正确做法：用 offcanvas 替代隐藏
Bootstrap 5 官方推荐方案是把左右栏封装进 offcanvas，而不是藏在栅格里。它通过 transform: translateX() 把元素推离视口，并自动添加 aria-hidden="true" 和 inert，语义和行为都干净。
- 左右栏必须和主内容同级，放在
.container-fluid下，**不能嵌套在.col或.row里**，否则定位失效、遮罩不出现 - 左侧 offcanvas 写
class="offcanvas offcanvas-start"，右侧写offcanvas-end - 宽度只能用 CSS 变量控制：
style="--bs-offcanvas-width: 240px;"，别碰width、left、float - 触发按钮要放在 navbar 或固定区域，避免被
position: fixed元素盖住
d-none d-lg-flex 仅适用于纯视觉收起场景
如果你的左右栏确实不需要交互、也不涉及无障碍要求（比如纯装饰性图标栏），且确认 DOM 留在页面里不会引发 JS 或 CSS 布局问题，可以用这个组合：
- 父容器必须是
d-flex，三个子项（左、中、右）同级扁平，不能嵌套row或col - 左右栏加
d-none d-lg-flex（BS5）或d-none d-lg-block（BS4），d-none必须写在前面，否则断点类可能被覆盖 - 中间栏只加
flex-grow-1，不设width，让它吃掉剩余空间 - IE11 不支持
flex-grow-1稳定渲染，若需兼容，改用 CSS Grid：grid-template-columns: 240px 1fr 240px
真正容易被忽略的不是 class 怎么写，而是“谁在控制尺寸”——栅格系统按百分比算，Flex 按剩余空间分，Grid 按轨道定义。三者混用，某个断点必然崩。
