如何用Bootstrap实现双折叠导航栏中间导航真正居中

嘿，我明白你想要的效果——让中间的导航链接在Navbar里真正水平居中，不受左侧品牌和右侧导航的宽度影响对吧？原代码里的order类和一些宽度设置其实干扰了居中效果，咱们用Bootstrap 4原生的flex特性来调整就好，这是最标准的做法：

核心思路 #

Bootstrap 4的Navbar本身就是flex容器，我们可以通过以下几点实现真正居中：

• 给三个区域（品牌、中间导航、右侧导航）设置合适的order类，控制它们在不同屏幕尺寸下的排列顺序
• 给中间导航区域添加mx-auto，利用flex的自动边距让它在剩余空间里居中
• 移除不必要的w-100和冗余的collapse类，避免破坏flex布局

修改后的完整代码 #

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
  <div class="container">
    <!-- 左侧品牌区 -->
    <a class="navbar-brand order-1" href="#">Brand</a>
    <button class="navbar-toggler order-0" type="button" data-toggle="collapse" data-target="#navbarCollapse">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 中间导航区 - 真正居中 -->
    <div class="navbar-collapse collapse order-2" id="navbarCollapse">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item">
          <a class="nav-link scroller" href="#menu">aa</a>
        </li>
        <li class="nav-item">
          <a class="nav-link scroller" data-toggle="collapse" data-target=".navbar-collapse.show" href="#specials">bb</a>
        </li>
        <li class="nav-item">
          <a class="nav-link scroller" href="#events">cc</a>
        </li>
      </ul>
    </div>

    <!-- 右侧导航区 -->
    <div class="navbar-collapse collapse order-3" id="navbarCollapse">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link scroller" href="#aaa">aaa</a>
        </li>
        <li class="nav-item">
          <a class="nav-link scroller" href="#bbb">bbb</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

关键修改点说明 #

• 移除了原代码中mr-auto、w-100这些干扰flex布局的类
• 给三个区域设置了order-0（汉堡按钮）、order-1（品牌）、order-2（中间导航）、order-3（右侧导航），保证移动端折叠时的正确顺序
• 中间导航的navbar-nav添加了mx-auto，这是让它真正居中的核心——flex容器会自动分配左右边距，让这个导航列表在剩余空间里完全居中
• 统一了collapse的id和data-target，避免元素冲突

这样调整后，不管左侧品牌和右侧导航的宽度怎么变，中间的导航区都会始终保持在Navbar的水平中心位置，完全符合Bootstrap的标准用法哦！

内容的提问来源于stack exchange，提问作者Johny D Good