Bootstrap 5导航栏元素间距调整及内容居中问题咨询

我看你想要调整Bootstrap 5导航栏的元素间距，还要让整体内容居中，对吧？咱们先从你的代码入手，一步步调整——首先你的原始导航结构有点不符合Bootstrap的标准写法，先理顺结构，再调整样式就容易多了。

修正后的完整代码（带注释） #

<nav class="navbar bg-primary mt-3 justify-content-center">
  <!-- 替换掉不存在的container-inline，用标准的container -->
  <div class="container d-flex align-items-center">
    <!-- 品牌区域：让logo和文字垂直居中 -->
    <div class="navbar-brand d-flex align-items-center">
      <!-- 把原来的ms-4换成me-2，缩小logo和文字的间距 -->
      <img src="img/logo.png" width="60" alt="Logo" class="me-2">
      <!-- 这里用span代替a更合适，因为只是标题不是跳转链接 -->
      <span class="text-light fw-bold">TEST</span>
    </div>

    <!-- 导航链接用Bootstrap标准的navbar-nav包裹 -->
    <!-- gap-2用来缩小链接之间的间距，数值可按需调整：gap-1更小，gap-3更大 -->
    <ul class="navbar-nav ms-auto d-flex gap-2">
      <li class="nav-item">
        <a class="nav-link text-light" href="#">One</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light" href="#">Two</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light" href="#">Three</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light" href="#">Four</a>
      </li>
    </ul>
  </div>
</nav>

关键调整说明 #

1. 结构规范修正

• 移除了Bootstrap中不存在的container-inline类，换成标准的container（如果想要全屏宽度可以用container-fluid）
• 导航链接必须用navbar-nav + nav-item的结构包裹，这是Bootstrap导航栏的标准写法，能更好地利用框架自带的样式
• 品牌文字用span替代a，如果它不需要跳转的话，语义更准确

2. 缩小元素间距

• Logo与文字之间：把原来的ms-5（左外边距）换成me-2（右外边距），直接缩小两者的间距，数值可以根据需求调整（比如me-1更小）
• 导航链接之间：给navbar-nav加上gap-2类（Bootstrap 5.2及以上版本支持），可以快速设置链接之间的横向间距，非常方便

3. 实现内容居中

• 给最外层的navbar添加justify-content-center类，让容器内的所有内容水平居中
• 品牌区域用d-flex align-items-center让Logo和文字垂直居中，视觉上更协调

兼容旧版Bootstrap（低于5.2）的方案 #

如果你的Bootstrap版本不支持gap类，可以用自定义CSS调整导航链接的间距：

/* 给每个导航链接添加右边距 */
.navbar-nav .nav-link {
  margin-right: 0.5rem; /* 调整这个数值来控制间距大小 */
}
/* 去掉最后一个链接的右边距，避免多余空隙 */
.navbar-nav .nav-item:last-child .nav-link {
  margin-right: 0;
}

这样就能完美实现你想要的效果啦！

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