如何调整Bootstrap导航栏中navbar-nav间距并居中Logo

首先注意：你用的是Bootstrap 5.3.2，mr-auto/ml-auto已经被me-auto/ms-auto（逻辑属性类）替代，这是首先要修正的点。

要同时实现Logo居中+两个导航列表之间的间距，有两种简单可行的方法：

方法1：给左侧列表添加右侧间距 #

直接给左侧的navbar-nav添加me-4（或按需调整为me-3/me-5等）来创造间距，同时给navbar-brand加mx-auto实现Logo居中：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <!-- mx-auto 让Logo水平居中 -->
    <a class="navbar-brand mx-auto" href="#"><img src="./images/kiratina_logo.png" alt="logo" /></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <!-- 替换mr-auto为me-auto，新增me-4控制右侧间距 -->
      <ul class="navbar-nav me-auto me-4">
        <li class="nav-item">
          <a class="nav-link" href="#">Why Water</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Our Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About Us</a>
        </li>
      </ul>
      <!-- 替换ml-auto为ms-auto -->
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Donate</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

方法2：用Flex Gap统一控制间距 #

给折叠容器添加d-flex gap-4（gap值按需调整），通过Flex布局的gap属性直接设置两个列表之间的间距，这种方式不会出现margin折叠问题，更符合现代布局逻辑：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand mx-auto" href="#"><img src="./images/kiratina_logo.png" alt="logo" /></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <!-- d-flex 启用Flex布局，gap-4 设置列表间间距 -->
    <div class="collapse navbar-collapse d-flex gap-4" id="navbarNav">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Why Water</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Our Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About Us</a>
        </li>
      </ul>
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Donate</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

关键说明 #

• mx-auto：Bootstrap内置类，设置水平方向margin为auto，让Logo在父容器中居中。
• me-*：对应margin-right（逻辑属性中的margin-end），数值1-5对应不同尺寸的间距，可按需调整。
• Flex Gap：通过gap-*类直接控制Flex容器内子元素的间距，比margin更简洁可靠。

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