使用 bootstrap 4 构建两列布局时，可通过为左侧栏添加 `position-fixed` 并配合合理的尺寸与定位控制，实现左栏静止、右栏垂直滚动的视觉效果。
在 Bootstrap 4 中，默认的栅格系统（如 col-md-3 和 col-md-9）基于文档流布局，因此仅靠 overflow-auto 或 vh-100 无法让某一列脱离滚动流——它们仍随父容器一起参与页面整体滚动。要实现“左栏固定、右栏独立滚动”，核心思路是将左栏脱离文档流，用 position: fixed 锁定其位置；同时为右栏预留对应空间，并设置可滚动区域。
✅ 正确做法如下：
-
为左栏添加 position-fixed 类（Bootstrap 4 内置类），并显式指定 top、left、height 和 width，确保其精确定位且高度占满视口：
<div class="col-md-3 pt-5 align-items-center back-color1 position-fixed vh-100" style="top: 0; left: 0; width: 25%; max-width: 25%;"> <img src="..." alt="logo"> <p>导航说明</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill4914" title="VPS Bootstrap"><img src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill4914" title="VPS Bootstrap">VPS Bootstrap</a> <p>从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p> </div> <a href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <h3>菜单标题</h3> <div class="mt-4"> <a href="#" class="btn btn-outline-light d-block mb-2">首页</a> <a href="#" class="btn btn-outline-light d-block mb-2">关于</a> </div> </div> -
为右栏设置 margin-left（值 = 左栏宽度），避免内容被固定左栏遮挡，并启用内部滚动：
<div class="col-md-9 ms-md-3 ms-lg-0" style="margin-left: 25%;"> <!-- 响应式兼容 --> <div class="overflow-auto" style="min-height: 100vh; padding: 1.5rem;"> <h1>主内容区</h1> <p>此处内容可自由滚动，不受左栏影响。</p> <div class="my-5"> <!-- 长内容示例 --> <div class="bg-light p-4 mb-3">区块 1</div> <div class="bg-light p-4 mb-3">区块 2</div> <div class="bg-light p-4 mb-3">区块 3</div> <!-- 更多内容... --> </div> </div> </div>
⚠️ 注意事项：
- position-fixed 元素会脱离文档流，因此必须手动为右栏设置 margin-left（或使用 ms-* 工具类）腾出空间；
- 避免在 .row 内直接对子列使用 position-fixed 后仍依赖 col-* 的宽度计算——建议用 width 或 max-width 显式控制固定栏宽度；
- 若需响应式适配（如移动端隐藏左栏），可结合 d-none d-md-block 控制显示，并为右栏移除 margin-left；
- vh-100 在固定定位中有效，但需确保父级无 transform、perspective 等触发新层叠上下文的属性，否则可能影响 fixed 行为。
? 总结：overflow-auto 失效的根本原因在于未将左栏脱离文档流。Bootstrap 的 position-fixed 是简洁可靠的解法，配合精准的尺寸与间距控制，即可稳健实现“一栏固定、一栏滚动”的专业布局效果。
