Bootstrap 5导航栏：折叠一组链接，切换器置于另一组左侧

你的问题出在折叠菜单展开时的布局结构上——默认的collapse navbar-collapse是块级元素，展开后会占据整行，把右侧固定链接挤到导航栏底部。调整结构就能解决：

修改后的完整代码 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
  <a href="#" class="navbar-brand ms-3">[Brand]</a>
  <!-- 新增外层flex容器，将切换器、折叠菜单、固定链接整合为右对齐组 -->
  <div class="d-flex align-items-center ms-auto">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#btn">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="btn">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="nav-link mx-3">Link One</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link mx-3">Link Two</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link mx-3">Link Three</a>
        </li>
      </ul>
    </div>
    <!-- 移除ms-auto，外层容器已负责右对齐 -->
    <ul class="navbar-nav flex-row">
      <li class="nav-item">
        <a href="#" class="nav-link mx-3">Link Four</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link mx-3">Link Five</a>
      </li>
    </ul>
  </div>
</nav>

关键调整说明 #

• 用d-flex align-items-center ms-auto容器包裹切换按钮、折叠菜单和固定链接，让这一组元素整体右对齐，且垂直居中
• 去掉固定链接列表的ms-auto，避免重复设置右对齐导致布局冲突
• 移除折叠菜单内navbar-nav的ms-auto，因为外层容器已经控制了整体对齐方向

这样调整后，折叠菜单展开时会向下延伸，不会影响右侧固定链接的位置，完全符合你要的Facebook导航栏简化版效果。

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