Bootstrap 4 Поле поиска Navbar не выравнивается по центру

Question

Я прошел почти все вопросы относительно элементов выравнивания по центру в панели навигации, но пока не нашел ответа.

Я пытался выровнять строку поиска по центру внутри панели навигации, но за ее пределами. складной кнопки. Проблема в том, что независимо от того, что я делаю, я не могу получить окно поиска в центре. Он просто остается влево.

Однако, если я уменьшу область просмотра, как только ссылки справа исчезнут внутри свертываемой кнопки, окно поиска будет точно выровнено по центру. Вот мой код Navbar:

<header>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Carousel</a>
    <form class="form-inline justify-content-center" style="text-align: center;">
      <input class="form-control mr-sm-2"type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav ml-auto ">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Log in</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

Я хочу, чтобы окно поиска находилось за пределами складной кнопки, но выровнялось по центру. Я попытался добавить mx-auto вместе с шириной, но это не работает. Я перепробовал десятки других вопросов по SO, пока ничего не решено.

Я прилагаю скриншоты для вашей справки При полной ширине строка поиска не выравнивается по центру

Как только появляется складная кнопка, все работает нормально.

Как выровнять окно поиска по центру?
Кроме того, есть ли способ увеличить ширину окна поиска, не используя явное CSS моделирование, как это нарушает адаптивное поведение?

Answer 1

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

Вы можете выровнять форму поиска по центру панели навигации в 2 шага.

• Оберните панель поиска и складное меню справа в отдельный родительский элемент div
• Добавьте класс justify-content-between к панели навигации

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark justify-content-between">
  <a class="navbar-brand" href="#">Carousel</a>
  <div>
    <form class="form-inline justify-content-center" style="text-align: center;">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
  <div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav ml-auto ">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Log in</a>
        </li>
      </ul>
    </div>
  </div>
</nav>