Как переместить элементы навигационной панели в центр?

Question

Я хочу переместить «Попробовать еще раз» между «Новые цвета» и «Легко» в центр. Я уже пробовал использовать флекс и другие вещи, но не могу понять. Я тоже хочу сделать его отзывчивым.

<nav class="navbar navbar-expand navbar-light">
  <div class="container">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-md-5 pl-md-5">
        <li class="nav-item">
          <a class="nav-link" href="#"
            >NEW COLORS <span class="sr-only">(current)</span></a
          >
        </li>
      </ul>
      <ul class="navbar-nav d-flex">
        <li class="nav-item">
          <a class="nav-link" href="#"
            >Try Again <span class="sr-only">(current)</span></a
          >
        </li>
      </ul>
      <ul class="navbar-nav ml-auto pr-md-5 mr-md-5">
        <li class="nav-item">
          <a class="nav-link" href="#"
            >EASY <span class="sr-only">(current)</span></a
          >
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">HARD</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

Добавьте d-flex и justify-content-between класс в id="navbarSupportedContent" <div>. Затем удалите класс ml-auto из последнего navbar-nav <ul>. Затем элемент навигации будет выровнен по левому, центру и правому краю.

<div class="collapse navbar-collapse d-flex justify-content-between" id="navbarSupportedContent">
     ...
<ul class="navbar-nav pr-md-5 mr-md-5"> <!-- Remove ml-auto -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<nav class="navbar navbar-expand navbar-light">
  <div class='container'>
    <!-- Add in d-flex and justify-content-between -->
    <div class="collapse navbar-collapse d-flex justify-content-between" id="navbarSupportedContent">
      <ul class="navbar-nav ml-md-5 pl-md-5">
        <li class="nav-item">
          <a class="nav-link" href="#">NEW COLORS <span class="sr-only">(current)</span></a>
        </li>
      </ul>
      <ul class="navbar-nav"> <!-- Remove d-flex -->
        <li class="nav-item">
          <a class="nav-link" href="#">Try Again <span class="sr-only">(current)</span></a>
        </li>
      </ul>
      <ul class="navbar-nav pr-md-5 mr-md-5"> <!-- Remove ml-auto -->
        <li class="nav-item">
          <a class="nav-link" href="#">EASY <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">HARD</a>
        </li>
      </ul>
    </div>
</nav>
</div>