本文详解如何在 bootstrap 4 响应式布局中，让左栏（如导航/侧边栏）保持固定定位，右栏内容可独立垂直滚动，解决 `overflow` 失效问题。
在 Bootstrap 4 中构建双栏页面时，常见的误区是仅依赖 overflow-auto 或 overflow-hidden 控制滚动行为——但这些 CSS 属性仅作用于自身内容溢出，无法改变元素在文档流中的定位方式。当整个 .row 容器随页面滚动时，即使右栏设置了 overflow-auto，左栏仍会跟随父容器一起位移，导致“固定”效果失效。
正确解法是将左栏脱离标准文档流，采用 position: fixed 定位。Bootstrap 4 内置了便捷的工具类 position-fixed，可直接应用：
<body>
<div class="container-fluid p-0">
<div class="row m-0">
<!-- 左栏：固定定位，脱离文档流 -->
<div class="col-md-3 pt-5 back-color1 vh-100 position-fixed start-0 top-0 h-100 overflow-y-auto">
<img src="logo.png" alt="Logo" class="mx-auto d-block mb-4">
<h3 class="text-center">Dashboard</h3>
<div class="mt-4 px-3">
<a href="#" class="d-block py-2 text-decoration-none text-dark">Home</a>
<a href="#" class="d-block py-2 text-decoration-none text-dark">Profile</a>
<a href="#" class="d-block py-2 text-decoration-none text-dark">Settings</a>
</div>
</div>
<!-- 右栏：预留左侧空间，允许独立滚动 -->
<div class="col-md-9 ms-md-3 pt-5 ps-md-5 pe-4">
<div class="vh-100">
<h1>Welcome to Admin Panel</h1>
<p>This section scrolls independently.</p>
</div>
<div class="pb-5">
<h2>Additional Content</h2>
<p>More content here — this will appear below the viewport and scroll naturally.</p>
<div class="mt-4" style="height: 800px; background:#f8f9fa;">
<!-- Simulated long content -->
</div>
</div>
</div>
</div>
</div>
</body>✅ 关键要点说明：
- 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）；
- 在小屏幕（<768px）下，position-fixed 可能影响响应式体验，建议结合媒体查询或使用 sticky-top 替代（适用于顶部吸附场景）；
- 若需支持 Safari 旧版本，请检查 position: fixed 兼容性，必要时添加 -webkit-transform: translateZ(0); 触发硬件加速。
通过合理组合 Bootstrap 工具类与 CSS 定位原理，即可优雅实现「左静右动」的现代双栏交互体验。
