移动端真隐藏两侧栏必须用d-none d-md-flex（BS5）或d-none d-md-block（BS4），因col类仅视觉折叠而DOM仍占位，会导致焦点跳过、屏幕阅读器误读及height计算异常；左右栏须与中间栏同级并包裹于d-flex容器内，且不可混用栅格与flex类。
移动端真隐藏两侧栏，必须用 d-none d-md-flex（BS5）或 d-none d-md-block（BS4）
只靠 col-sm-12 或 col-md-3 类无法真正移除 DOM 占位——它只是让列“视觉上变宽”，但元素仍在文档流里，会导致焦点跳过、屏幕阅读器误读、min-height: 100vh 计算异常等问题。
正确做法是给左右两栏直接加断点类组合：
-
d-none必须写在前面，确保所有断点下默认隐藏 -
d-md-flex（BS5）或d-md-block（BS4）仅在 ≥768px 时激活显示 - 左右栏和中间栏必须同级，且包裹在同一
d-flex容器内，否则d-md-flex不生效 - 别混用
col-*和flex-grow-*，栅格系统与 flex 布局逻辑冲突，小屏下容易错位
为什么不能只用 col-md-3 col-md-6 col-md-3？
这种写法在手机上会让左右栏堆叠到顶部，而不是消失。DOM 还在，浏览器仍为其分配空间，可能引发：
- 滚动区域被意外撑高，导致底部空白或内容截断
- 键盘 Tab 导航会跳过中间栏，直接落到下一个可聚焦元素
- 即使加了
display: none，父容器的height可能因 flex 子项残留而计算错误 - 无障碍工具仍能抓取并朗读已“隐藏”的侧栏内容
如果需要保留侧栏交互能力，该用 offcanvas 而非 d-none
当左右栏不是纯静态内容，而是带导航、搜索或筛选功能时，d-none 就不合适了——它彻底移除了交互入口。
offcanvas 是 Bootstrap 5 官方推荐的替代方案：
- 它通过
transform: translateX()把元素推离视口，同时自动添加aria-hidden="true"和inert，语义上真正移除 -
offcanvas必须和d-flex同级，不能嵌套在.col或.row内，否则定位失效、遮罩不出现 - 宽度定制只能用 CSS 变量：
style="--bs-offcanvas-width: 280px;"，别写width或left - 触发按钮要放在
.navbar内，否则可能被fixed导航栏盖住
IE11 兼容性问题没法绕开
flex-grow-1 和 d-flex 在 IE11 中支持极差，左右栏常错位、中间栏不占满，甚至整个布局塌陷。
如果你的项目仍需支持 IE11：
- 放弃 flex 方案，改用 CSS Grid：
grid-template-columns: 200px 1fr 250px，IE11 支持良好 - 或者明确告知业务方：IE11 已不再维护，降级为单栏流式布局
- 切忌混用 flex + grid + 栅格，任何一个断点都可能突然崩掉——真正容易被忽略的不是 class 怎么写，而是“谁在控制尺寸”
