Bootstrap5导航栏菜单无法居中且需保留左侧Logo该如何解决？

问题根因 #

你给.navbar-nav添加的justify-content-center未生效，核心原因是：.navbar-nav的父容器.collapse.navbar-collapse默认子元素左对齐排列，且.navbar-nav本身宽度仅适配菜单项内容宽度，无法撑起父容器剩余空间，内部的居中规则没有生效基础。 #

解决方案 #

方案1：菜单在Logo右侧剩余空间居中（最简单实现，适配大部分场景） #

仅需要在原有代码基础上修改2处即可：

1. 给<div class="collapse navbar-collapse">添加Bootstrap内置类justify-content-center
2. 可选择性删除nav标签上多余的d-flex类（navbar默认已开启flex布局，无需重复声明）

修改后的导航栏HTML代码片段如下：

<!--Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container-fluid">
      <a class="navbar-brand logo ps-5" href="#">LOGO</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <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="#">Menu</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">What's New</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

方案2：菜单相对于整个页面完全居中（不受Logo宽度影响） #

如果需要让菜单严格在整个视口的水平居中位置，不被左侧Logo的宽度挤占位置，可以添加少量自定义CSS，同时适配移动端折叠菜单的显示：
在你的style.css中添加如下代码：

@media (min-width: 992px) { /* 仅在桌面端非折叠状态生效 */
  .navbar-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

该方案不需要修改原有HTML代码，移动端折叠时会自动恢复默认布局，不会出现错位问题。

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