2021 更新
引导程序 5（测试版）
Bootstrap 5 还有一个 flexbox Navbar，并引入了新的 RTL 支持。因此，“左”和“右”的概念已被“开始”和“结束”所取代。因此，Bootstrap 5 beta 的保证金实用程序发生了变化：
ml-auto=>ms-automr-auto=>me-auto
另请注意，data-toggle并且data-target也发生了变化：
data-toggle=>data-bs-toggledata-target=>data-bs-target
Bootstrap 5 的导航栏演示
引导程序 4
现在 Bootstrap 4 有了 flexbox，导航栏对齐就容易多了。以下是Bootstrap 4 导航栏中左、右和中心的更新示例，以及此处演示的许多其他对齐方案。
flexbox 、auto-margins和ordering实用程序类可用于根据需要对齐导航栏内容。有很多事情需要考虑，包括导航栏项目（品牌、链接、切换器）在大屏幕和移动/折叠视图上的顺序和对齐方式。不要将网格类 (row,col) 用于 Navbar。
这里有各种各样的例子......
左、中（品牌）和右链接：
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">Navbar 2</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
http://codeply.com/go/qhaBrcWp3v
另一个带有中心链接和覆盖徽标图像的 BS4 导航栏选项：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
<ul class="navbar-nav ml-auto text-center">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto my-2 order-0 order-md-1 position-relative">
<a class="mx-auto" href="#">
<img src="//placehold.it/120/ccff00" class="rounded-circle">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
<ul class="navbar-nav mr-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
或者，这些其他 Bootstrap 4 对齐方案：
品牌左，死点链接，（右空）
品牌和链接中心，左右图标
更多 Bootstrap 4 示例：
移动设备上的左侧切换器，品牌右侧
中心品牌和移动设备
上的链接右对齐桌面上的链接，移动设备上的中心链接
左侧链接和切换器，中心品牌，搜索右侧
另请参阅：Bootstrap 4 将导航栏项目
向右对齐 Bootstrap 4 导航栏与在移动设备上不折叠的按钮右对齐 Bootstrap 4 导航栏中
的元素居中
引导程序 3
选项 1 - 品牌中心，带有左/右导航链接：
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Left</a></li>
<li><a href="#about">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
</ul>
</div>
</nav>
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
http://bootply.com/98314 (3.x)
选项 2 - 左、中和右导航链接：
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li><a href="#">Center</a></li>
<li><a href="#">Center</a></li>
<li><a href="#">Center</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Right</a></li>
</ul>
</div>
</nav>
@media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}
http://bootply.com/SGYC6BWeBK
选项 3 - 将品牌和链接居中
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
@media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://codeply.com/go/1lrdvNH9GI
更多示例：
左品牌，中心链接
左切换器，中心品牌
对于 3.x，另请参阅 nav-justified：Bootstrap center navbar
Bootstrap 中的中心
导航栏 Bootstrap 4 将导航栏项目向右对齐
