Размещение ссылок в навигационной панели Bootstrap для распространения по всей области навигационной панели

Question

Я спроектировал навигационную панель с помощью начальной загрузки 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

Используйте justify-content-between w-100 на navbar-nav для равномерного распределения навигационных элементов ...

  <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