Bootstrap5导航栏中间导航链接无法居中问题求助

问题根因 #

Bootstrap 5 中.navbar-collapse默认是flex弹性布局容器，之前的调整只给中间导航列表设置了单侧自动边距，无法实现三栏等分定位：

• 加ms-auto时，仅左侧外边距自动撑开，导航块会被推到靠近右侧按钮的位置
• 加me-auto时，仅右侧外边距自动撑开，导航块会被推到靠近左侧Logo的位置
• 加text-center时，仅能控制列表内部文字对齐，无法让列表本身在flex容器中居中，还会挤压右侧按钮的固定位置

实现步骤 #

不需要额外编写自定义CSS，全部使用Bootstrap 5自带的工具类即可实现「左侧Logo固定、中间导航绝对居中、右侧登录注册按钮固定在最右」的效果，仅需修改3处类名：

• 给左侧Logo的.navbar-brand标签添加me-auto类，占满Logo右侧到中间导航的剩余左侧空间
• 把中间导航<ul>标签上原有的ms-auto/me-auto/text-center类替换为mx-auto，让列表左右两侧自动分配等宽外边距，实现自身水平居中
• 把右侧按钮容器原有的col-md-3类删除，替换为ms-auto类，占满按钮左侧到中间导航的剩余右侧空间，保证按钮始终固定在最右端

修改后完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg border-bottom navbar-white bg-white padding-bottom" id="mainNav">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
            <i class="fas fa-bars"></i>
        </button>

    <!-- 左侧Logo -->
    <a class="navbar-brand me-auto" href="<?= urlFull(); ?>">
            <img src="<?= urlFull(); ?>images/img-logo.png" class="img-fluid" alt="GM SEO Services">
        </a>

    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <?php if (!isset($_SESSION['member'])) { ?>
      <!-- 未登录状态中间导航 -->
      <ul class="nav nav-pills mx-auto">
        <li class="nav-item"><a href="<?= urlFull(); ?>" class="nav-link <?= ($_SERVER['PHP_SELF'] == " /index.php ") ? "active " : " "; ?>" aria-current="page">Home</a></li>
        <li class="nav-item"><a href="services.php" class="nav-link <?= ($_SERVER['PHP_SELF'] == " /services.php ") ? "active " : " "; ?>">Services</a></li>
        <li class="nav-item"><a href="software.php" class="nav-link <?= ($_SERVER['PHP_SELF'] == " /software.php ") ? "active " : " "; ?>">Software</a></li>
        <li class="nav-item"><a href="contact.php" class="nav-link <?= ($_SERVER['PHP_SELF'] == " /contact.php ") ? "active " : " "; ?>">Contact</a></li>
      </ul>
      <?php } else { ?>
      <?php $globId = getGlobalId($member); ?>
      <!-- 登录后状态中间导航 -->
      <ul class="nav nav-pills mx-auto">
        <li class="nav-item"><a href="my-account.php" class="nav-link <?= ($_SERVER['PHP_SELF'] == " /my-account.php ") ? "active " : " "; ?>" aria-current="page">My Account</a></li>
        <li class="nav-item"><a href="licenses.php" class="nav-link <?= ($_SERVER['PHP_SELF'] == " /licenses.php ") ? "active " : " "; ?>" aria-current="page">Licenses</a></li>
      </ul>
      <?php } ?>

      <!-- 右侧登录注册按钮区 -->
      <div class="ms-auto text-end">
        <?php if (!isset($_SESSION['member'])) { ?>
        <a class="btn btn-outline-primary me-2 <?= ($_SERVER['PHP_SELF'] == " /login.php ") ? "active " : " "; ?>" href="login.php" role="button">Login</a>
        <a class="btn btn-success" href="sign-up.php" role="button">Sign-up</a>
        <?php } ?>
      </div>
    </div>
  </div>
</nav>

补充说明：移动端折叠展开时，上述类名不会影响折叠菜单的垂直排列逻辑，不需要额外写断点适配样式。

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