Bootstrap 4移动端双导航栏定位问题求助：右侧导航栏错位

我完全懂你遇到的困扰——小屏设备点开左侧汉堡菜单时，右侧导航栏居然跑到它上方去了，没法乖乖待在原来的位置。这其实是因为原来的布局没处理好左右导航的空间关系，左侧折叠菜单展开时打乱了整体的布局流。

下面是具体的解决方案，你可以照着调整你的代码：

核心思路 #

把两个分开的导航栏整合到同一个navbar容器里，用Bootstrap的Flex布局工具固定右侧导航的位置，让它始终靠右，彻底摆脱左侧折叠菜单的影响。

具体代码修改 #

调整导航栏结构 #

将原来的两个导航栏合并到一个navbar中，用Flex布局分配空间：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- 左侧可折叠导航区域 -->
  <div class="flex-grow-1 d-flex align-items-center">
    <!-- 汉堡按钮 -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#leftNavbarCollapse">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- 折叠菜单内容 -->
    <div class="collapse navbar-collapse" id="leftNavbarCollapse">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">项目管理</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">设置</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 右侧固定导航区域 -->
  <div class="d-flex align-items-center">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">消息</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">个人中心</a>
      </li>
    </ul>
  </div>
</nav>

关键修改点说明 #

• Flex空间分配：给左侧区域加flex-grow-1，让它占满导航栏的剩余空间，右侧区域自然会被推到最右侧，位置再也不会乱。
• 垂直对齐：给左右两个区域都加d-flex align-items-center，确保汉堡按钮、导航链接都垂直居中，视觉上更协调。
• 右侧不折叠：右侧导航没有包裹在collapse容器里，所以不管屏幕尺寸多大，它都保持展开状态，不会被折叠。

额外优化提示 #

如果右侧导航内容较多，怕小屏上换行，可以加个简单的CSS样式防止换行：

.navbar .navbar-nav.right-nav {
  white-space: nowrap;
}

然后给右侧的ul标签加上right-nav类就可以了。

这样修改后，你再去小屏设备上点开左侧汉堡菜单，右侧导航会稳稳固定在右上角，再也不会乱跑啦。

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