在 bootstrap 4 布局中，通过为左栏添加 `position-fixed` 并配合合理的尺寸与定位控制，可轻松实现左栏静止、右栏独立滚动的响应式双栏效果。
要实现“左栏固定、右栏滚动”的经典侧边导航+主内容布局（常见于后台管理或文档页面），*不能依赖 overflow-hidden 或 overflow-auto 单独作用于栅格列（`.col-）**——因为 Bootstrap 的.col-*是弹性子元素，默认随父容器.row流动，且.row本身不产生定位上下文，导致overflow` 属性失效或行为异常。
✅ 正确解法：将左栏脱离文档流，设为固定定位（position: fixed），并手动控制其宽高与位置；右栏则通过 margin-left 预留空间，并启用垂直滚动。
以下是优化后的结构与关键 CSS（兼容 Bootstrap 4.6+）：
<body>
<!-- 左侧固定导航栏 -->
<div class="position-fixed top-0 start-0 h-100 bg-primary text-white p-4 d-none d-md-block"
style="width: 256px; z-index: 1020;">
<img src="logo.png" alt="Logo" class="mb-4" height="40">
<h3 class="h5 mb-4">Dashboard</h3>
<nav>
<a href="#" class="d-block text-white py-2 text-decoration-none">Home</a>
<a href="#" class="d-block text-white py-2 text-decoration-none">Projects</a>
<a href="#" class="d-block text-white py-2 text-decoration-none">Settings</a>
</nav>
</div>
<!-- 右侧滚动主内容区 -->
<main class="ms-md-xxl" style="margin-left: 256px;">
<div class="container-fluid py-4">
<div class="row">
<div class="col-12">
<h1 class="h2 mb-3">Welcome to Admin Panel</h1>
<p>This content scrolls independently while the left sidebar stays fixed.</p>
<!-- 更多可滚动内容 -->
<div class="mt-5" style="height: 200vh; background: #f8f9fa;">
<h3>Scroll down to see the effect</h3>
<p>Long content area — only this part scrolls.</p>
</div>
</div>
</div>
</div>
</main>
</body>? 关键要点说明：
- ✅ 使用 position-fixed + top-0 start-0 h-100 确保左栏固定在视口左上角并占满高度；
- ✅ 手动设置 width: 256px（与 margin-left 一致），避免响应式错位；推荐用 CSS 变量或自定义类统一维护；
- ✅ 右侧内容包裹在 <main> 中，并通过 ms-md-xxl（Bootstrap 5+ 类名）或内联 margin-left: 256px 推开，确保不被固定栏遮挡；
- ✅ 添加 d-none d-md-block 实现移动端隐藏左栏（提升移动体验），如需响应式展开，可结合 Bootstrap 折叠组件（collapse）增强交互；
- ⚠️ 注意：固定定位元素脱离文档流，不要放在 .container-fluid > .row 内部——否则会破坏栅格逻辑，这也是原代码中 overflow 失效的根本原因。
? 进阶建议：
若需支持深色模式、滚动时添加阴影或粘性头部，可配合 @media (prefers-color-scheme) 或 Intersection Observer 监听滚动状态，进一步提升专业度。
此方案轻量、语义清晰、完全兼容 Bootstrap 4 的工具类体系，无需额外 JS 即可稳定运行。
