如何实现Navbar Logo居中，桌面端链接分置两侧，移动端为折叠切换按钮？

修改后的完整代码 #

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid d-flex justify-content-between align-items-center">
    <!-- 左侧导航 -->
    <ul class="navbar-nav d-none d-lg-flex">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>

    <!-- Logo 同时作为移动端切换按钮 -->
    <a class="navbar-brand d-flex align-items-center" href="#" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      Navbar
    </a>

    <!-- 右侧导航 -->
    <ul class="navbar-nav d-none d-lg-flex">
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>

    <!-- 移动端折叠菜单 -->
    <div class="collapse navbar-collapse w-100" id="navbarSupportedContent">
      <ul class="navbar-nav w-100 flex-column">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>

    <!-- 隐藏原切换按钮 -->
    <button class="navbar-toggler d-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

关键改动说明 #

• 桌面端布局调整
  • 把原有单一导航列表拆成左侧、右侧两个独立导航组，用d-none d-lg-flex控制仅在大屏（lg及以上尺寸）显示
  • 给容器container-fluid添加d-flex justify-content-between align-items-center类，让左右导航分别靠两端，Logo自动居中
• 移动端交互调整
  • 给navbar-brand添加折叠触发属性，让Logo直接成为移动端的导航展开/收起按钮
  • 给原切换按钮添加d-none类，完全隐藏不再显示
  • 折叠菜单内的导航列表添加w-100 flex-column，确保移动端展开后占满宽度并垂直排列

效果匹配 #

• 桌面端：Logo居中，导航链接分置两侧，符合需求
• 移动端：仅显示Logo，点击即可展开/收起全部导航，满足交互要求

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