引导4海军搜索框中心不对齐

Question

我已经研究了几乎所有关于肚脐中的中心对齐元素的问题，还没有找到答案。

我一直试图在我的肚脐内，但在可折叠按钮之外，对齐搜索栏。问题是，不管我做什么，我都不能把搜索框放在中间。它只会留在左边。

然而，如果我使视口变小，一旦右边的链接消失在可折叠按钮中，搜索框就会在中间很好地对齐。这是我的海军条码：

<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和宽度，但是它不起作用。我试过很多其他的问题所以，还没有解决。

我附上截图供你参考

在全宽度时，搜索栏不对齐

​

一旦可折叠按钮出现，一切都正常。

如何使搜索框在中间对齐？

另外，是否有任何方法可以在不使用显式CSS样式的情况下增加搜索框的宽度，因为这会破坏响应行为？

Answer 1

我刚在How to put form element (search bar) into the center of the navbar?回答了一个类似的问题

您可以在两个步骤中将搜索表单与导航条的中心对齐。

将搜索栏和右侧的可折叠菜单包装为单独的父div

• Add
• 类到导航条

​

<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>

​