如何调整Navbar布局：实现link1左对齐、link2居中、link3右对齐

我想制作一个顶部带有logo、下方为导航栏的网站，目标是让导航栏中的link1左对齐、link2居中、link3右对齐。尝试使用flex属性和justify-content但未能成功，现有代码如下，当前效果为三个链接均挤在左侧。

现有HTML代码 #

<header class="top-part">
   <div class="logo"> 
    <img class="logo" src="images/logo.png" height=100px width="237px">
   </div>
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li>
          <a class="nav-link" id="home" href="#">link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="cart" href="#">link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="contact" href="#">link 3</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

现有CSS代码 #

@media screen and (min-width:777px){
  .nav-link {
    padding:18px 0;
    min-width:120px;
  }
  .navbar {
    padding: 0
  }
}

.header{
  position:sticky ;
  top: 0;
}

由于你使用的是Bootstrap导航组件，默认样式会干扰flex布局效果，通过以下修改可实现需求：

修改后的HTML代码 #

<header class="top-part">
   <div class="logo"> 
    <img class="logo" src="images/logo.png" height="100px" width="237px">
   </div>
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav w-100">
        <li class="nav-item flex-grow-1 text-left">
          <a class="nav-link" id="home" href="#">link 1</a>
        </li>
        <li class="nav-item flex-grow-1 text-center">
          <a class="nav-link" id="cart" href="#">link 2</a>
        </li>
        <li class="nav-item flex-grow-1 text-right">
          <a class="nav-link" id="contact" href="#">link 3</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

修改后的CSS代码 #

@media screen and (min-width:777px){
  .nav-link {
    padding:18px 0;
    min-width:120px;
  }
  .navbar {
    padding: 0
  }
}

.top-part {
  position: sticky;
  top: 0;
}

关键修改说明 #

1. 给导航列表<ul class="navbar-nav">添加w-100类，让列表占满导航栏宽度
2. 给每个列表项<li>补充nav-item类（原代码第一个li缺失），并添加flex-grow-1类，让三个列表项平分可用空间
3. 分别给三个列表项添加text-left、text-center、text-right类，精确控制对应链接的对齐方式
4. 修正CSS选择器，将.header改为.top-part，匹配HTML中实际的类名

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