Bootstrap 4侧边栏与导航栏重叠问题修复求助

你遇到的问题核心是**fixed-top类让Navbar脱离了父容器的约束**，默认会占据整个页面宽度，同时和左侧fixed定位的侧边栏产生重叠。下面给你两种可行的修复方案，根据你的需求选择：

方案一：让Navbar适配所在列宽度（非固定定位） #

这种方案最简单，适合不需要Navbar固定在顶部的场景：

1. 移除Navbar上的fixed-top类，这样Navbar会继承父容器col-md-10的宽度，不会超出范围。
2. 给页面主体内容添加合适的margin-top，避免Navbar遮挡内容（你已经有.first-container类，可以直接复用）。

修改后的Navbar代码：

<nav class="navbar navbar-expand-lg navbar-light z-depth-1 border-none" style="background-color: #ffffff">

然后在Navbar下方的内容容器添加first-container类：

<div class="first-container">
  <!-- 你的页面内容 -->
</div>

方案二：保留固定顶部，同时适配列宽度 #

如果你需要Navbar始终固定在顶部，那需要手动调整它的位置和宽度，匹配侧边栏的布局：

1. 保留fixed-top类，添加自定义CSS来限制Navbar的宽度和偏移量：

.navbar.fixed-top {
  left: 16.6667%; /* 对应col-md-2的宽度比例 */
  width: 83.3333%; /* 对应col-md-10的宽度比例 */
  right: 0;
}

2. 确保你的页面内容容器（.first-container）的margin-top足够，避免被固定的Navbar遮挡（你现有代码里的70px应该足够）。

这样修改后，Navbar会固定在顶部，但只占据右侧col-md-10的宽度，不会和左侧侧边栏重叠。

额外优化建议 #

你的侧边栏CSS里设置了width:100%，但它已经在col-md-2容器内，这个属性会导致布局冲突，建议移除：

.sidebar {
  position: fixed;
  left: 0;
  height: 100%;
  z-index: 1000;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #2B303C;
  padding-right: 0;
  padding-left: 0;
  /* width: 100%; 移除这一行 */
}

这样调整后，你的布局就能正常工作了~

内容的提问来源于stack exchange，提问作者user7301337