求助：如何让两行响应式折叠导航主链接在大屏等宽分布

我明白你的困扰——用了Bootstrap的nav-justified和nav-pills组合后，主链接在大屏上还是挤在一起，没法均匀占满宽度。其实问题出在默认类的样式优先级和flex属性设置上，咱们可以通过自定义CSS来轻松解决：

步骤1：给导航添加专属自定义类 #

先给第二行导航的<ul>加一个专属类（比如main-nav），这样自定义样式只会作用于这个导航，不会影响页面其他组件：

<ul class="navbar-nav nav nav-pills nav-justified main-nav"> 
  <li class="nav-item"> 
    <a class="nav-link" href="#">Home</a> 
  </li> 
  <li class="nav-item dropdown"> 
    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> Categories </a> 
    <div class="dropdown-menu"> 
      <a class="dropdown-item" href="#">Cat 1</a> 
      <a class="dropdown-item" href="#">Cat 2</a> 
      <a class="dropdown-item" href="#">Cat 3</a> 
      <a class="dropdown-item" href="#">Cat 4</a> 
    </div> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link" href="#">Live Auction</a> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link" href="#">Contact us</a> 
  </li> 
</ul>

步骤2：编写自定义CSS覆盖默认样式 #

针对大屏（lg及以上，即992px宽度以上），给每个nav-item设置flex: 1，让它们平分导航栏的可用宽度，同时确保文字居中提升视觉效果：

/* 仅在lg及以上视口生效 */
@media (min-width: 992px) {
  .main-nav .nav-item {
    flex: 1; /* 强制每个导航项平分父容器宽度 */
    text-align: center; /* 文字居中，让布局更协调 */
  }
  /* 让下拉菜单宽度和父导航项一致，避免错位 */
  .main-nav .dropdown-menu {
    width: 100%;
  }
}

方案原理说明 #

Bootstrap默认的nav-pills组件中，nav-item并没有设置flex-grow属性，所以即使添加了nav-justified类，它们也不会主动拉伸占满空间。通过flex: 1我们强制每个导航项分配相等的空间，完美实现你需要的均匀等宽分布效果。

如果你不想保留nav-justified类，也可以直接用Bootstrap的flex工具类替换，比如把<ul>的类改成navbar-nav nav nav-pills d-lg-flex w-100，再配合上面的自定义CSS，效果完全一致。

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