真隐藏必须用 d-none d-md-flex（bs5）或 d-none d-md-block（bs4），仅删栅格类是假隐藏；d-none 必须前置，bs5 用 d-md-flex 因需 flex 上下文，bs4 用 d-md-block 因 flex 支持弱，断点选 md（≥768px）覆盖平板横屏及以上。
移动端左右栏真隐藏必须用 d-none d-md-flex（BS5）或 d-none d-md-block（BS4）
只靠 col-sm-12 或删掉栅格类是假隐藏：DOM 还在文档流里，会撑高父容器、干扰 min-height: 100vh、导致键盘焦点跳过中间内容、屏幕阅读器误读。真正“消失”得让浏览器彻底不参与布局计算——d-none 是唯一语义级隐藏方式。
关键细节：
-
d-none必须写在前面，否则断点类可能被覆盖（如d-md-flex d-none无效） - BS5 用
d-md-flex，不是d-md-block：因为左右栏需包裹在d-flex容器内，d-md-flex才能激活 flex 上下文并显示 - BS4 用
d-md-block，因 flex 支持弱，依赖 block 流式回退 - 断点选
md（≥768px）是行业惯例，覆盖平板横屏及以上，手机竖屏（d-none
左右栏必须与中间栏同级，且父容器加 d-flex
常见错误是把三栏套进 .row + .col，再加 d-none —— 这会导致 flex 规则失效，左右栏在中大屏下仍按栅格百分比缩放，而非固定或自适应。
正确结构只有三层：
- 最外层：一个
<div class="d-flex">（不能是 <code>.container或.row） - 子级：三个平级
<div>，分别对应左、中、右栏 <li>左右栏上同时加 <code>d-none d-md-flex（BS5）或d-none d-md-block（BS4） - 中间栏只加
flex-grow-1，不设 width，让它吃掉剩余空间
示例（BS5）：
<div class="d-flex"> <div class="d-none d-md-flex flex-grow-0 w-25" style="min-width: 200px;">左侧</div> <div class="flex-grow-1">中间内容</div> <div class="d-none d-md-flex flex-grow-0 w-25" style="min-width: 250px;">右侧</div> </div>
别混用栅格类（col-*）和 flex 类（flex-grow-1）
这是最隐蔽的崩塌点：一旦在同一个元素上同时写 col-md-3 和 flex-grow-0，Bootstrap 的栅格 CSS 和浏览器 flex 引擎会互相覆盖，结果是左右栏在某个宽度突然变窄、中间栏留白、甚至整行换行。
根本原因在于两者控制维度不同：
-
col-*是基于百分比的网格系统，依赖.row的负 margin 和.col的 padding -
flex-grow是弹性盒子的剩余空间分配机制，依赖父容器display: flex - 混用 = 让两个独立布局引擎争夺同一元素的尺寸控制权
如果项目已重度使用栅格，又想快速实现三栏响应式，唯一安全路径是：全量迁移到 d-flex 结构，删掉所有 .row 和 .col 套壳。
需要交互式侧边栏？改用 offcanvas，别硬塞 d-none
如果左右栏实际是导航菜单、工具面板等需用户主动展开/收起的模块，d-none d-md-flex 就不够用了——它只是静态隐藏，无法触发动画、不支持键盘关闭、无障碍属性缺失。
此时必须切到 Bootstrap 5 官方方案：offcanvas：
- 桌面端：左右栏用
d-none d-lg-block常驻显示 - 移动端：另起一个
<div class="offcanvas offcanvas-start d-lg-none">，内容与侧栏一致 <li>触发按钮放在 <code>.navbar内，data-bs-target指向 offcanvas 的 id - offcanvas 宽度只能用
style="--bs-offcanvas-width: 280px;"控制，别碰width或float
真正容易被忽略的是：offcanvas 必须和主 d-flex 同级，不能嵌套在它内部——否则 transform 定位失效，遮罩层不出现，关闭按钮失灵。
