如何在导航栏中居中设置窗体

Question

我有这个 Bootstrap4 导航栏。有一个品牌和几个链接（导航项目）。下面我有一个出现在右侧的搜索表单。我将如何在导航中将其居中。它不应该居中以占用剩余空间，而应该完全居中在整个导航栏内。我应该添加任何类或样式来使其工作？另外，我想在表单当前所在的右侧添加链接。

我尝试弄乱边距类，在表单中添加"mx-auto"，将表单放在 ul 列表中并使用"display：inline-block"

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-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="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

如前所述，内联表单在右侧居中，但它应该完全居中，在中间。这里有一些照片作为背景。（另外，我正在使用Bootstrap Material Design，这就是为什么它看起来有点不同）

当前：当前结果我想要什么：我想要/期望什么

Answer 1

     <form class="form-inline my-2 my-lg-0" style="margin: 0 auto;">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>

如果这不起作用，您可以创建一个新类并将其粘贴到类旁边 form-inline my-2 my-lg-0 mycenterformclass

编辑 =>

  <div style="margin: 0 auto;">  <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form></div>
</div>

你也可以做

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" style="float:left;">
    <ul class="navbar-nav mr-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="#">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
  <div style="float:right; width:50%">  <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form></div>
</div>

Answer 2

创建一个父<div>块并向其添加width和margin：

.alignCenter{
   margin:0 auto;
   width:100%; // Not needed if you've used bootstrap in correct containers
}

<div class="alignCenter">
<form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
        </div>