我正在创建一个像bootstrap-4一样的网页。我是初学者。我想将导航栏中的表单移动到中心。我该怎么做？这是我的网页：
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" navbar>
<a class="navbar-brand" href="#">Agora</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="#">Messages<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Settings
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-xlg">
<input class="form-control mr-sm-5" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</html>
我删除了一些无用的页面部分。
在navbar-nav之前移动它并使用mx-auto ...
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Agora</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">
<form class="form-inline mx-auto my-2">
<input class="form-control mr-sm-1" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Messages<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Settings
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/XxoZUwh5C3
相关：Bootstrap NavBar with left, center or right aligned items
感谢@zim我解决了我的问题。通过她给我的解决方案，我也移动了“消息”。所以我更新了一下我的代码：
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" navbar>
<a class="navbar-brand" href="#">Agora</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>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Messages<span class="sr-only">(current)</span></a>
</li>
</ul>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline my-2 mx-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>
<ul class="navbar-nav mr-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Settings
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</nav>但答案真的很有用！ :)