2021年更新
引导5 (beta)
Bootstrap 5也有一个灵活的导航栏，并引入了新的RTL支持。因此，“左”和“右”的概念已被“开始”和“结束”所取代。因此，引导5 beta的边际效用发生了变化:
Ml-auto => ms-auto
Mr-auto => me-auto
还要注意数据切换和数据目标也发生了变化:
data-b -toggle => data-b -toggle
Data-target => data-bs-target
导航条演示引导5
引导4
现在Bootstrap 4有了flexbox，导航条对齐就容易多了。以下是Bootstrap 4导航栏中左、右、中对齐的更新示例，以及这里演示的许多其他对齐场景。
flexbox、auto-margin和ordered实用工具类可以根据需要对导航栏内容进行对齐。有很多事情需要考虑，包括大屏幕和移动/折叠视图中导航栏项目(品牌、链接、切换器)的顺序和对齐。不要在导航栏中使用网格类(row,col)。
这里有各种各样的例子…
左、中(品牌)、右链接:
<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个例子:
手机上的善变者左，品牌右
手机上的品牌和链接中心
桌面上的链接右对齐，移动端链接居中
左链接&切换器，中心品牌，搜索右边
另请参阅:引导4对准导航栏项向右
引导4导航栏右对齐的按钮，不崩溃的移动
在引导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也参见导航栏-justified:引导中心导航栏
引导的中心导航栏
引导4将导航栏项向右对齐
