左侧固定，右侧自适应布局技巧

本文深入解析了在Bootstrap框架下实现“左侧固定宽度（如200px）、右侧自适应填充”布局的核心难点与可靠方案：指出直接使用col-*类会因百分比栅格随屏幕缩放而违背“固定”本质，强调必须脱离栅格、采用d-flex容器配合flex-grow-0与显式width/min-width控制，并详解父子结构约束、高度设置（如calc(100vh - 56px)）、移动端响应式隐藏策略（d-none d-lg-flex或offcanvas）、滚动失效根因及IE11兼容性退路，帮助开发者避开常见陷阱，构建稳定、可维护的现代弹性布局。

为什么不能直接用 Bootstrap 的 col-* 类实现左侧固定

因为 col-* 是基于百分比的栅格系统，它会随屏幕宽度缩放。比如 col-2 在 lg 断点下约 16.67%，窗口从 1200px 缩到 992px，宽度就从 ~200px 缩到 ~165px——这和“固定 200px”目标冲突。真正固定需脱离栅格计算，改走 Flexbox 的 flex-basis 控制逻辑。

d-flex 容器 + flex-grow-0 + 显式宽度才是可靠组合

必须确保父容器是 d-flex，子项同级、无 .row 包裹（否则 flex 属性被干扰）。左右栏加 flex-grow-0 并设 min-width 或内联 style="max-width:100%"；中间栏用 flex-grow-1 吃掉剩余空间。

• w-25 这类类只是兜底（大屏下占 25%），min-width: 200px 才是真正的固定锚点
• 三个子项必须平级，不能嵌套在 .row 里——.row 默认是 display: flex，但自带 margin 和 min-height，会破坏高度约束
• 如果需要响应式隐藏某侧栏（如移动端只留中间），给对应 div 加 d-none d-lg-flex，别删节点

右侧滚动失效？大概率是高度没被约束住

overflow-y: auto 在右侧不生效，典型现象是滚动条一闪而过、内容全挤在顶部、或整个页面纵向滚动而非仅右侧。根本原因是浏览器不知道“多高才算溢出”——flex-grow-1 只负责分配空间，不自动设高度。

• 右侧区域必须显式设高，如 style="height: calc(100vh - 56px)"（减去 .navbar 高度）
• 若父容器是 body，需确保 html, body { height: 100% }，否则 100vh 计算失准
• 避免在右侧内部再用 .container（带 max-width），建议换 .container-fluid 或手动设 width: 100vw

移动端适配：别指望 col-sm-* 自动收起固定栏

固定定位在小屏下体验极差，且 position: fixed 不响应 Bootstrap 的断点规则。col-sm-2 + fixed 组合只会让侧栏永远显示、强行遮挡导航栏。

• 在 @media (max-width: 768px) 下，把左侧 position 改回 static，并设 display: none
• 右侧取消 margin-left，恢复为 width: 100%
• 更稳妥的做法是用 Bootstrap 5 的 offcanvas 替代：左侧内容放进
  ，触发按钮放在顶部导航里

最易被忽略的是边界归属问题：固定宽度和流式自适应混合时，“谁控制尺寸”必须清晰。要么全交给栅格，要么全交给 flex，混着来必然错乱。另外，IE11 不支持 flex-grow，如果仍需兼容，得回退到 CSS Grid 或 JS 动态计算宽度。

理论要掌握，实操不能落！以上关于《左侧固定，右侧自适应布局技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！