bootstrap怎么实现固定左侧菜单右侧内容滚动-Bootstrap教程-PHP中文网

左侧菜单用 position: fixed 时，右侧内容不随其滚动的关键是确保菜单脱离文档流且右侧预留空间；需设菜单宽高、右侧用 margin-left 避免遮挡，并在右侧外层容器设 height 和 overflow-y: auto 实现独立滚动。

左侧菜单用 `position: fixed` 但右侧内容不随它一起滚动？

关键不是“让右侧滚动”，而是**阻止左侧被卷走**。默认情况下，position: fixed 的元素脱离文档流、相对于视口定位，所以只要给它设好 top、left 和高度约束，它就钉在那儿了；右侧内容只要不跟它重叠，自然会从它右边开始布局并正常滚动。

常见错误是把菜单和内容都塞进同一个 container 里，又没设 padding-left 或 margin-left，结果内容被固定菜单盖住——这不是滚动失效，是布局遮挡。

菜单容器必须设 position: fixed + 明确宽高（比如 width: 250px; height: 100vh;）
右侧内容区域必须留出左侧空间：用 margin-left: 250px 或 padding-left: 250px（推荐 margin-left，不影响内部尺寸计算）
不要给右侧区域设 overflow: hidden，否则滚动条会消失
如果用了 Bootstrap 的 .container，确保它在外层包裹右侧内容，而不是和菜单平级嵌套

用 Bootstrap 5 的栅格系统配合 fixed 布局会冲突吗？

会。Bootstrap 的 .row 和 .col-* 依赖 display: flex 和 flex-wrap，而 position: fixed 元素完全脱离 flex 容器，不会参与栅格计算。所以不能把固定菜单写成 <div class="col-2"> —— 它会被 flex 忽略，甚至导致右侧 <code>.col-10 撑满整行。

正确做法是：菜单不用栅格类，手动定位；右侧内容用栅格，但起始列要避开菜单宽度。

菜单单独写，不加任何 .col 或 .container
右侧内容用 <main class="container"><div class="row"><div class="col">...，靠 <code>margin-left 预留空间
如果想响应式隐藏菜单（比如小屏），别只靠 display: none，记得同时清除 margin-left，否则右侧内容会卡在左边空出一块

`overflow-y: auto` 加在哪一层才让右侧真正可滚动？

加在**右侧内容最外层容器**上，且该容器必须有明确高度限制（比如 height: calc(100vh - 60px)），否则 auto 不生效——浏览器不知道“超出多少才算溢出”。很多人加在 body 或 html 上，结果整个页面双滚动条，或者菜单也被卷走。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

推荐结构：<div class="sidebar">...</div> <main class="content" style="margin-left: 250px; height: calc(100vh - 56px); overflow-y: auto;">...</main>
height 要减掉顶部 navbar 高度（如 Bootstrap 5 默认 56px），否则底部会被截断
避免在 .container 上直接设 overflow，它通常无高度，得包一层带高度的 <div> <li>移动端测试时注意：iOS Safari 对 <code>position: fixed + overflow 组合支持不稳定，必要时加 -webkit-overflow-scrolling: touch