本文详解如何在 bootstrap 4 响应式布局中，让左栏（如导航/侧边栏）保持固定定位，右栏内容可独立垂直滚动，解决 `overflow` 失效问题。
在 Bootstrap 4 中构建双栏页面时，常见的误区是仅依赖 overflow-auto 或 overflow-hidden 控制滚动行为——但这些 CSS 属性仅作用于自身内容溢出，无法改变元素在文档流中的定位方式。当整个 .row 容器随页面滚动时，即使右栏设置了 overflow-auto，左栏仍会跟随父容器一起位移，导致“固定”效果失效。
正确解法是将左栏脱离标准文档流，采用 position: fixed 定位。Bootstrap 4 内置了便捷的工具类 position-fixed，可直接应用：
Welcome to Admin Panel
This section scrolls independently.
Additional Content
More content here — this will appear below the viewport and scroll naturally.
✅ 关键要点说明：
- position-fixed 必须配合 start-0 top-0（或 left: 0; top: 0;）明确锚定位置；
- 左栏需添加 h-100 确保高度撑满视口，overflow-y-auto 实现内部内容微滚动（如导航过长）；
- 右栏需用 ms-md-3（margin-start on md+）避开固定左栏，避免内容被遮挡；
- 移除 .row 的默认 margin（加 m-0）和 .container-fluid 的 padding（加 p-0），防止固定定位偏移；
- 切勿在固定元素上使用 col-* 作为布局依据——它已脱离网格系统，col-md-3 此处仅作宽度参考，实际宽度由 position-fixed 和 width（或 vw）控制更稳妥（如需精确，可额外加 w-25）。
⚠️ 注意事项：
- 固定定位元素不占文档流空间，因此右栏必须手动留出对应宽度（如 ms-md-3 或 ml-3）；
- 在小屏幕（
- 若需支持 Safari 旧版本，请检查 position: fixed 兼容性，必要时添加 -webkit-transform: translateZ(0); 触发硬件加速。
通过合理组合 Bootstrap 工具类与 CSS 定位原理，即可优雅实现「左静右动」的现代双栏交互体验。
