Bootstrap导航栏小屏幕展开位置异常问题求助

你遇到的这个问题，根源出在自定义CSS里给.navbar设置了固定的height:90px——这直接破坏了Bootstrap导航栏原本的flex布局流。

Bootstrap 4的导航栏在移动端（小窗口）状态下，汉堡按钮和折叠菜单默认是垂直排列的：汉堡按钮在顶部，点击后菜单会在它下方展开并占据整行宽度。但当你给.navbar设置固定高度后，导航栏的内部空间被强制限定，折叠菜单无法正常换行到汉堡按钮下方，反而被挤到了右侧和按钮同一行。

修复步骤 #

只需要修改你的自定义CSS，移除固定高度，改用padding来控制导航栏的高度，这样既保留你想要的视觉高度，又不破坏布局逻辑：

/*NAV*/
nav li{
  border-left: 2px solid black;
  font-size: 1em;
}
nav li:hover{
  border-left: 2px solid black;
  box-shadow: inset 0px 0px 5px #000;
}
.navbar{
  background-color: #f2f2f2;
  /* 移除固定height设置 */
  /* height: 90px; */
  /* 用上下内边距替代，调整数值可控制导航栏高度 */
  padding: 1.5rem 0;
  border-bottom: 1px solid grey;
  border-top: 1px solid grey;
  -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.4);
  box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.4);
}
.nav-link{
  width: 150px;
  text-align: center;
}

更贴合Bootstrap规范的替代方案 #

如果你想直接用Bootstrap内置工具类来控制间距，也可以在<nav>标签上添加py-4类（py-3/py-5可根据需求调整高度），这样连自定义padding都不用写：

<nav class="navbar navbar-expand-lg navbar-light py-4">
  <!-- 其余导航栏代码保持不变 -->
</nav>

修改完成后，移动端点击汉堡按钮时，菜单就会正常显示在按钮下方了。

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