左侧固定250px、右侧自适应的最优解是col-auto配min-width或d-flex：col-auto需与col配对并设min-width:250px；d-flex则用flex-grow-0+width+flex-grow-1，禁用栅格类混用。
左侧固定宽度、右侧自适应的栅格写法
Bootstrap 栅格本身不支持“固定像素宽度 + 百分比剩余空间”混合单位，col-3 或 col-md-2 都是按视口比例缩放的，窗口变窄时宽度必然收缩。真正稳住像素值的解法只有两个：用 col-auto 配合显式宽高，或彻底绕开栅格用 d-flex。
推荐优先用 col-auto：
- 它让列宽由内容撑开，不参与百分比计算
- 必须和另一个 col（如 col、col-md-9）在同一个 .row 内配对使用
- 给 col-auto 元素加 style="min-width: 250px; width: 250px;"，min-width 是锚定不收缩的关键，仅靠 w-25 或 col-2 不行
- IE11 不支持 col-auto，需降级到 Bootstrap 4 栅格或改用 d-flex 方案
用 d-flex 实现真正像素锁定
当你要左侧死守 250px、右侧吃掉所有剩余空间，且兼容性要求不高时，d-flex 是最干净的方案。它完全绕过栅格的百分比逻辑，直接交由 Flexbox 分配空间。
关键点：
- 父容器必须加 d-flex，否则 flex-grow-1 无效
- 左侧加 flex-grow-0 + style="min-width: 250px; width: 250px;"
- 右侧只加 flex-grow-1，不设 width、不加 col-*
- 严禁嵌套 .row 或 .container，否则 flex 行为被干扰
- 混用 col-* 和 flex-grow 会导致布局不可预测——两个系统在打架
响应式断点下如何隐藏左侧并释放右侧空间
小屏下硬留一个 250px 宽的固定侧边栏是反体验的，但直接删 DOM 或乱加 d-none 又容易破坏 JS 初始化状态。正确做法是用响应式工具类控制显示+留白联动。
建议组合：
- 左侧加 d-none d-lg-flex（注意 d-none 必须写在前面）
- 右侧同步加 ms-lg-3 或 ms-lg-5（对应左侧宽度），但更稳妥的是用 ms-lg-0 清除小屏下的 margin-left
- 如果左侧用了 position: fixed，小屏下不仅要隐藏它，还必须移除右侧的 margin-left，否则会残留白边卡住内容
- 别指望 col-sm-12 自动让右侧铺满——fixed 元素脱离文档流后，右侧不会“感知”它的消失，留白必须手动清
为什么给 .col-md-3 加 position: fixed 会失效
很多人试图直接给栅格列加 position: fixed，结果侧边栏缩成一条线、卡在左上角，右侧内容从底下穿透显示。这不是 CSS 没生效，而是布局逻辑被绕过了。
根本原因：
- .col-* 依赖 .row 的 flex 布局来分配尺寸和位置
- 一旦加 position: fixed，元素就脱离文档流，.row 完全失去对其约束能力
- 此时浏览器按默认规则渲染：width: auto、height: auto，导致视觉塌缩
- 正确做法是固定列内部的容器（如 <div class="sidebar-inner">），而非列本身
- 若必须用 fixed，宽高必须显式写死，比如 width: 250px; height: 100vh;，不能依赖栅格类
实际项目里最容易被忽略的是：固定定位后右侧内容的留白必须和左侧真实宽度严格一致，且响应式切换时这个留白要同步增减。很多布局在桌面端看着完美，一缩到手机就错位，问题往往出在这里——不是代码没写，是留白没联动。
