大屏左侧固定宽度、右侧自适应的两栏布局应使用Flexbox而非Bootstrap栅格，左侧设flex-grow-0、flex-shrink-0及width/min-width:240px，右侧仅用flex-grow-1；混用栅格与Flex会导致布局冲突。
大屏左侧固定宽度、右侧自适应的两栏布局，不能靠 col-md-3 + col-md-9 实现——那只是比例分配，不是固定像素。 真正稳的解法是脱离栅格百分比逻辑，用 Flexbox 控制宽度锚点。
为什么 col-md-3 不等于“240px 固定宽”
Bootstrap 的 col-md-3 表示“在 md 断点及以上占 12 列中的 3 份”，即约 25% 视口宽度。窗口从 992px 拉到 1920px，它会从 ~248px 撑到 ~480px，根本不是固定值。你写 min-width: 240px 也拦不住它放大，因为栅格系统不响应 min-width 的约束。
常见错误现象：
- 侧边栏图标/文字在大屏被拉得稀疏变形
- 右侧内容区随左侧“呼吸式缩放”，UI 锚点漂移
- 和设计稿像素对不齐，前端验收反复返工
用 d-flex + flex-grow-0 锁死左侧宽度
必须放弃 .row + .col-* 组合，改用 Flex 布局直控尺寸。父容器加 d-flex flex-row，左右子项同级、不嵌套任何 .row 或 .container。
实操要点：
- 左侧元素加
flex-grow-0 flex-shrink-0，再配style="width: 240px; min-width: 240px;"（min-width是关键兜底） - 右侧元素只加
flex-grow-1，它会自动吃掉剩余所有空间 - 别混用
col-md-3和flex-grow-1——两个布局引擎打架，右侧可能塌缩或溢出 - 若需兼容 IE11，改用
grid-template-columns: 240px 1fr（加-ms-grid-columns前缀）
小屏下如何收起固定侧边栏
硬留一个 240px 宽的 fixed 栏在手机上，会直接挤走主内容。响应式切换不是靠删 DOM，而是靠显示控制。
推荐写法：
- 给左右栏都加
d-none d-lg-flex，注意d-none必须写在前面，否则某些 Bootstrap 版本中会被覆盖 - 不要用
d-lg-none单独隐藏左侧——那样右侧仍按“有左侧”预留了margin-left，导致空白 - 如果要用 offcanvas，触发按钮必须放在
.navbar内，否则小屏下可能被遮挡或错位
固定左侧后，右侧滚动失效？检查这三个地方
右侧设了 overflow-y-auto 却没滚动条，大概率是高度没被真正约束住。
必须确认：
- 右侧容器是否设置了
height: calc(100vh - 56px)（减去.navbar高度）或min-height: 0？只写vh-100在嵌套 flex 中常失效 - 左侧用了
position: fixed？那右侧必须手动加margin-left: 240px，不能依赖ms-md-3这类工具类——数值不精确 - 整个外层是否意外加了
overflow: hidden？比如.container或某个祖先元素，会截断滚动行为
最易忽略的点：固定宽度和自适应空间之间的边界，必须由同一个布局引擎（flex 或 grid）统一控制。混用 col-* 和 flex-grow，等于让两个系统互相覆盖，结果一定是其中一方失效——这不是 Bug，是机制冲突。
