2021年更新
Bootstrap 5(beta版)
Bootstrap 5还具有一个flexbox导航栏,并引入了新的RTL支持。因此,“左”和“右”的概念已被替换为“start”和“end”。因此,Bootstrap 5 beta的边距实用程序已更改:
ml-auto
=> ms-auto
mr-auto
=> me-auto
还要注意data-toggle
和data-target
也发生了变化:
data-toggle
=> data-bs-toggle
data-target
=> data-bs-target
Bootstrap 5导航栏演示
Bootstrap 4
现在Bootstrap 4拥有flexbox,Navbar对齐变得更加容易。这里提供Bootstrap 4 Navbar中左、右和居中的更新示例,以及其他多种对齐方案的演示。
flexbox、auto-margins和ordering实用类可用于根据需要对齐Navbar内容。有许多要考虑的事情,包括大屏幕和移动/折叠视图上Navbar项目(品牌、链接、切换器)的顺序和对齐方式。不要使用网格类(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 示例:
在移动端左侧显示 toggler ,品牌在右侧
在移动端居中显示品牌和链接
在桌面端右对齐链接,在移动端居中显示链接
在左侧显示链接和 toggler,居中显示品牌,搜索在右侧
还可以参考以下内容:Bootstrap将导航栏项目对齐到右侧
Bootstrap 4导航栏右侧对齐,不会在移动设备上折叠的按钮
在Bootstrap导航栏中居中一个元素
Bootstrap 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;
}
https://codeply.com/p/X6Uv70mMVi(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%);
}
}
https://codeply.com/p/v7pQKZacTg
选项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居中导航栏
在Bootstrap中居中导航栏
将Bootstrap导航栏项目对齐到右侧