在 Bootstrap 导航栏中放置链接以传播到所有导航栏区域

Question

我使用 bootstrap 4 设计了一个导航栏，所有链接都可以向左移动 并且正确使用 Ml 和 MR auto 我想要的是我创建的链接 均匀分布在导航栏上可以做些什么来实现这一点谢谢。下面是我的代码。

   <div class="container">
              <h1 class="text-muted"> Jumia Sale Page</h1>
              <nav class="navbar navbar-expand-lg ">
                  <button class="navbar-toggler " data-toggle="collapse" data-target="#navbarcollapse">
                      <span class="navbar-toggler-icon" ></span>
                  </button>
                  <div class="collapse justify-content-center  navbar-collapse" 
         id="navbarcollapse">
                      <ul class ="navbar-nav mr-auto">
                          <li class="nav-item  active"><a href="#"class="nav- 
      link">Home</a></li>
                          <li><a href="#" class="nav-link">Services</a></li>
                          <li><a href="#"class="nav-link">Downloads</a></li>
                          <li><a href="#"class="nav-link">Projects</a></li>
                          <li><a href="#"class="nav-link">About Us</a></li>
                          <li><a href="#"class="nav-link">Contact</a></li>
                      </ul>
                  </div>

              </nav>

          </div>

Answer 1

在navbar-nav 上使用justify-content-between w-100 以均匀分布导航项...

  <ul class="navbar-nav justify-content-between w-100">
        <li><a href="#" class="nav-link active">Home</a></li>
        <li><a href="#" class="nav-link">Services</a></li>
        <li><a href="#" class="nav-link">Downloads</a></li>
        <li><a href="#" class="nav-link">Projects</a></li>
        <li><a href="#" class="nav-link">About Us</a></li>
        <li><a href="#" class="nav-link">Contact</a></li>
  </ul>

https://www.codeply.com/go/zkgcXDSqTf