Bootstrap 4导航栏元素均匀间距实现及适配问题咨询

嘿，刚好我之前处理过类似的需求，给你几个实用的方案，完美解决你的问题：

核心思路：用Flexbox替代固定宽度 #

你之前想给.nav-link加width:25%的问题在于——固定宽度不仅在菜单项数量变化时直接失效，还会在移动端导致链接挤在一起或者换行混乱。Bootstrap的导航栏本身就是基于Flexbox构建的，咱们直接利用这个特性来实现自动均分，还能兼顾移动端。

具体实现代码 #

首先，假设你的导航栏基础结构是这样的：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav w-100"> <!-- 关键：给navbar-nav加w-100让它占满父容器宽度 -->
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

然后添加自定义CSS：

/* 桌面端（Bootstrap的lg断点以上） */
@media (min-width: 992px) {
  .navbar-nav .nav-link {
    flex-grow: 1; /* 每个链接自动均分可用宽度 */
    text-align: center; /* 文字居中，视觉上更整齐 */
  }
}

/* 移动端（lg断点以下）保持默认堆叠样式 */
@media (max-width: 991px) {
  .navbar-nav .nav-link {
    flex-grow: 0; /* 取消均分，让链接正常堆叠 */
    text-align: left; /* 恢复左对齐，符合移动端习惯 */
  }
}

为什么这个方案能适配WordPress动态菜单项？ #

因为我们用的是flex-grow:1，不管你后续在WordPress后台添加多少个菜单项（4个、5个甚至更多），每个.nav-link都会自动平分navbar-nav的宽度，完全不需要手动修改百分比或者宽度值——Flexbox会帮你搞定所有计算。

额外优化小技巧 #

• 如果担心链接文字太长导致换行，可以给.nav-link加个white-space: nowrap;（桌面端），或者调整字体大小，避免排版混乱。
• 要是想让链接之间有固定的间距，也可以在.navbar-nav上用gap属性，比如给.navbar-nav加gap: 1rem;，不过结合flex-grow的话，均分效果会更自然。

这样下来，你的导航栏既能在桌面端完美均匀分布，移动端又能保持Bootstrap默认的折叠菜单体验，还能自动适配WordPress后台添加的新菜单项，一举三得！

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