最稳妥的方式是给左右栏加d-none d-md-flex（BS5）或d-none d-md-block（BS4），确保同级包裹于d-flex容器内，避免仅用栅格类导致DOM残留影响布局、焦点和无障碍。
移动端隐藏左右栏，用 d-none + 断点类最直接
想让左右栏在手机上消失、只留中间内容，最稳妥的方式是给左右两栏加上 d-none d-md-flex（bootstrap 5）或 d-none d-md-block（bootstrap 4），而不是靠 col-sm-* 控制显隐——后者只是改列宽，dom 仍在，会干扰焦点、滚动和无障碍读取。
-
d-none在所有断点下都隐藏，d-md-flex仅在md（≥768px）及以上才启用 flex 布局并显示 - 必须确保左右栏和中间栏同级、包裹在同一
d-flex容器内，否则d-md-flex不生效 - 不要对左右栏同时加
flex-grow-0和col-*，二者逻辑冲突：一个按 flex 分配，一个按栅格百分比计算
为什么不能只用 col-sm-12 col-md-3 col-md-6 col-md-3
这种写法在小屏下会让左右栏“堆叠到顶部”，而非真正隐藏——col-sm-12 只是让每栏占满一行，DOM 还在页面流中，可能造成：height 计算异常、overflow 溢出、键盘导航跳过中间内容、屏幕阅读器误读。
- 即使加了
display: none，浏览器仍会为该元素保留原始文档流位置，影响min-height: 100vh等布局行为 - Bootstrap 官方明确建议：需要真隐藏，就用
d-none类组合断点，而不是依赖栅格类的“视觉折叠” - 若需保留左右栏的交互能力（比如侧边栏菜单），应改用
offcanvas，而非单纯隐藏
d-flex 容器里左右栏怎么设固定宽又不撑开
左右栏要固定像素宽度（比如 200px），又不能随窗口缩放变窄，就得绕过栅格系统，用内联 style="width: 200px" 或 w-25 + min-width: 200px 双保险。
-
flex-shrink-0（BS4）或flex-grow-0（BS5）必须加，否则容器变窄时左右栏会被压缩 - 中间栏只加
flex-grow-1，不设width，让它自动吃掉剩余空间 - 如果左右栏用了
min-width但没配flex-shrink-0，小屏下仍可能被 flex 引擎强行挤压
IE11 兼容性问题没法绕开
flex-grow 和 d-flex 在 IE11 中支持不全，尤其是 flex-grow-1 表现不稳定，左右栏容易错位或中间栏不占满。如果你的项目还必须支持 IE11，别硬套 flex 方案。
- 回退方案是用 CSS Grid：
grid-template-columns: 200px 1fr 250px，IE11 支持良好 - 或者用 JS 动态计算宽度（不推荐，增加维护成本）
- 更现实的做法是：明确告知业务方 IE11 不再维护，或降级为单栏流式布局
真正容易被忽略的不是怎么写 class，而是“谁控制尺寸”——要么全交给 flex，要么全交给 grid，混用就会在某个断点突然崩掉。
