小开

< >强2021更新< / >强

引导5 (beta)

Bootstrap 5也有一个灵活的导航栏，并引入了新的RTL支持。因此，“左”的概念;和“;right"已被“;start"和“;以何种;。因此，引导5 beta的边际效用发生了变化:

# EYZ0 =比;# EYZ1
# EYZ0 =比;# EYZ1

还要注意data-toggle和data-target也发生了变化:

# EYZ0 =比;# EYZ1
# EYZ0 =比;# EYZ1

导航条Demo for Bootstrap 5

引导4

现在Bootstrap 4有了flexbox，导航条对齐就容易多了。这里是在Bootstrap 4导航栏中更新了左，右和中心的例子和许多其他对齐场景在这里演示。

flexbox， auto-margins和订购实用工具类可以根据需要来对齐导航栏内容。有很多事情需要考虑，包括大屏幕和移动/折叠视图中导航栏项目(品牌、链接、切换器)的顺序和对齐。# EYZ3。

这里有各种各样的例子…

左、中(品牌)、右链接:

<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对齐场景:

# EYZ0

# EYZ0:

# EYZ0 # EYZ0 # EYZ0 # EYZ0

参见:引导4将导航栏项向右对齐
# EYZ0
# EYZ0

引导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;
}

# EYZ0 (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

更多的例子:

# EYZ0 # EYZ0

为3。x也见nav-justified: 引导中心导航栏

# EYZ0 # EYZ0

小开

我发现以下是一个更好的解决方案，取决于你的左，中，右项目的内容。宽度为100%而没有边距会导致div重叠，并且会阻止锚标记正确工作——这是在没有混乱使用z索引的情况下。

.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
margin: auto;
margin-left: 48%;
}

小开

我需要一些类似的东西(左、中、右对齐的项目)，但是能够将居中的项目标记为活动。对我有用的是:

http://www.bootply.com/CSI2KcCoEM < a href = " http://www.bootply.com/CSI2KcCoEM " > < / >

<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 class="navbar-left"><a href="#">Left 1</a></li>
<li class="navbar-left"><a href="#">Left 2</a></li>
<li class="active"><a href="#">Center 1</a></li>
<li><a href="#">Center 2</a></li>
<li><a href="#">Center 3</a></li>
<li class="navbar-right"><a href="#">Right 1</a></li>
<li class="navbar-right"><a href="#">Right 2</a></li>
</ul>
</div>
</nav>

CSS:

@media (min-width: 768px) {
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li.navbar-right {
float: right !important;
}
}

小开

拍我的头，只是重读我的回答，意识到OP要求两个标志，一个在左边，一个在右边，有一个中心菜单，而不是相反。

这可以严格地在HTML中通过使用Bootstrap的“navbar-right”和“navbar-left”来完成徽标，然后在UL中使用“navbar-nav”而不是“navbar-nav”。不需要额外的CSS(除非你想把导航栏折叠切换在xs视口的中心，那么你需要覆盖一点，但会让你自己)。

<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 class="navbar-brand navbar-left"><a href="#"><img src="http://placehold.it/150x30"></a></div>


</div>
<div class="navbar-brand navbar-right"><a href="#"><img src="http://placehold.it/150x30"></a></div>


<div class="navbar-collapse collapse">
<ul class="nav nav-justified">
<li><a href="#">home</a></li>
<li><a href="#about">about</a></li>
</ul>
</div>
</nav>

bootp: # EYZ0

对于那些试图以“品牌”为中心的人，这里是我的老答案:

我知道这个帖子有点老了，但只是为了发布我在工作时的发现。我决定基于skelly的答案，因为tomaszbak的崩溃。首先，我创建了我的“navbar-center”，并关闭了CSS中正常导航栏的浮动:

.navbar-center
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}


.navbar-brand{
float:none;
}

然而，skelly回答的问题是，如果你有一个非常长的品牌名称(或者你想用一个图像来代表你的品牌)，那么一旦你进入sm视口，由于绝对位置，可能会有重叠，正如评论者所说，一旦你进入xs视口，切换开关就会断开(除非你使用Z定位，但我真的不想担心这个问题)。

所以我所做的是利用引导响应实用程序创建多个版本的品牌块:

<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 class="navbar-brand visible-xs"><a href="#">Brand That is Really Long</a></div>
</div>
<div class="navbar-brand visible-sm text-center"><a href="#">Brand That is Really Long</a></div>
<div class="navbar-brand navbar-center hidden-xs hidden-sm"><a href="#">Brand That is Really Long</a></div>


<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>
<li><a href="#">Left</a></li>
<li><a href="#about">Left</a></li>
<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>
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
</ul>
</div>

所以现在lg和md视口有品牌居中与左和右的链接，一旦你到达sm视口你的链接下降到下一行，这样你就不会与你的品牌重叠，然后最后在xs视口折叠开始，你可以使用切换。你可以更进一步，当使用navbar-brand时，修改navbar-right和navbar-left的媒体查询，这样在sm视口中，链接都是居中的，但没有时间审查它。

你可以在这里查看我的旧bootply: www.bootply.com/n3PXXropP3

我想拥有3个品牌可能和“z”一样麻烦，但我觉得在响应式设计的世界里，这个解决方案更适合我的风格。

小开

这是一个过时的问题，但我找到了一个替代的解决方案，从引导github页面分享权利。文档还没有更新，还有其他关于SO的问题要求相同的解决方案，尽管问题略有不同。这个解决方案并不特定于你的情况，但正如你所看到的，解决方案是<div class="container">在<nav class="navbar navbar-default navbar-fixed-top">之后，但也可以根据需要替换为<div class="container-fluid"。

<!DOCTYPE html>
<html>


<head>
<title>Navbar right padding broken </title>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>


<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#/" class="navbar-brand">Hello</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">


<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group navbar-btn" role="group" aria-label="...">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogin">Se connecter</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSignin">Créer un compte</button>
</div>
</li>
</ul>
</div>
</div>
</nav>
</body>


</html>

答案在这一页的小提琴上找到: # EYZ0

并且在V3中被列为无法修复。

小开

引导4(截至alpha 6)

导航条是用flexbox构建的!你需要的不是浮动，而是flexbox和保证金效用。

右对齐使用collapse div上的justify-content-end:

<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>

完整示例:https://jsbin.com/kemawa/edit?output

小开

最简单的解决方案:

只需要将navbar分为列:例如，如果你总共有24列，12列将是空的，12列将控制导航栏:

<nav class="navbar navbar-default">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>


<div class="col-sm-12">
<ul class="nav navbar-nav" align="center">
<li><a href="#">Home</a></li>
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
<li><a href="#">Fourth Link</a></li>
</ul>
</div>
</div>
</nav>

小开

引导4

我们有很多方法来对齐导航栏项目。

用于左对齐 # EYZ0

navbar-nav mr-auto"

用于右对齐 # EYZ0

navbar-nav ml-auto"

用于中心对齐 # EYZ0

navbar-nav mx-auto"

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a routerLink="/" class="navbar-brand" href="#">Bootstrap 4</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact us</a>
</li>
</ul>
</nav>

小开

<div class="d-flex justify-content-start">hello</div>
<div class="d-flex justify-content-end">hello</div>
<div class="d-flex justify-content-center">hello</div>
<div class="d-flex justify-content-between">hello</div>
<div class="d-flex justify-content-around">hello</div>

把你想要的字段按照上面的划分放在中间、右边或左边。

小开

在想要向右移动的部分上，将左距设置为auto -> ml-auto。

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto"> !<--MARGIN LEFT AUTO HERE !-->
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>

小开

这是BS5的更新，并建议编辑@Zim的答案。不幸的是，由于编辑队列已满，我无法提交编辑。如果在队列允许新的编辑时，有高声誉的用户可以提交编辑，那就太好了。

< >强2021更新< / >强

引导5.0.0 beta-1

随着rtl支持的增加，ml-auto和mr-auto变成了ms-auto和me-auto(左/右开始/结束)。

引导5还要求导航栏包含在container div中。

这段代码产生了与第一个Bootstrap 4示例相同的结果:

左、中(品牌)、右链接:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav me-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 ms-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>
</div>
</nav>

小开

在Zim的回答中，示例5 left and center only with empty space right并没有真正地居中导航链接。我们可以用一些改变来修复它:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />


<p>Zim's original code</p>
<!-- example 5 left and center only with empty space right -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary flex-sm-nowrap flex-wrap">
<div class="container-fluid">
<button class="navbar-toggler flex-grow-sm-1 flex-grow-0 me-2" type="button" data-bs-toggle="collapse"
data-bs-target="#navbar5">
<span class="navbar-toggler-icon"></span>
</button>


<span class="navbar-brand flex-grow-1">Navbar 5</span>


<div class="navbar-collapse collapse flex-grow-1 justify-content-center" id="navbar5">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>


<div class="flex-grow-1">
<!--spacer-->
</div>


</div>
</nav>
<div class="centerMarker">mid</div>
<br><br><br>




<p>Modified solution</p>
<!-- example 5 left and center only -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary flex-sm-nowrap flex-wrap">
<!-- 2.5rem is height of the toggler -->
<div class="container-fluid" style="height:2.5rem">


<span class="navbar-brand position-absolute">
<button class="navbar-toggler me-2" type="button" data-bs-toggle="collapse"
data-bs-target="#navbar5">
<span class="navbar-toggler-icon"></span>
</button>
Navbar 5
</span>


<div class="navbar-collapse collapse mx-auto w-100" id="navbar5">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>


</div>
</nav>


<div class="centerMarker">mid</div>
<style>
body {
font-family: monospace;
padding: 10px
}


.centerMarker {
margin: 0 auto;
width: fit-content;
background-color: wheat;
}
</style>

切换到整页并调整浏览器大小以查看导航链接

Bootstrap不允许我们设置flex-basis:0，所以属性仍然是auto，间隔器不会相等地展开。因此navlinks不在居中
我们可以在brand container上使用类position-absolute，在navlinks上使用类mx-auto w-100。切换器将导航条的最小高度设置为2.5rem。我们必须设置为流体div容器。

小开

在引导5 ms-auto工作为我移动导航项向右

bootstrap的代码是:

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>

我把ul标签<ul class="navbar-nav">改为<ul class="navbar-nav ms-auto mb-2 mb-lg-0">，这对我来说很好

我编辑后的代码是:

 <nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand nav-title" href="#">Cooking Master</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>

小开

在bootstrap 5中，类被更改，因此为 ml-auto是由ms-auto和改变的 mr-auto随me-auto改变

对于左，我们必须使用<年代trong>年代而不是l，并且对于正确的，我们必须使用e而不是r

引导导航栏左，中心或右对齐的项目

引导5 (beta)

引导4

引导3

引导4(截至alpha 6)

引导5.0.0 beta-1