本文翻译自：Bootstrap NavBar with left, center or right aligned items
In Bootstrap , what is the most platform-friendly way to create a navigation bar that has Logo A on the left, menu items in the center, and Logo B on the right? 在Bootstrap中 ，最简单的平台创建导航栏的方法是在左侧显示徽标A，在中央显示菜单项，在右侧显示徽标B。
Here is what I've tried so far, and it ends up being aligned so that Logo A is on the left, menu items next to the logo on the left and Logo B on the right. 这是到目前为止我尝试过的方法，最终将其对齐，以便徽标A位于左侧，菜单项位于徽标左侧，右侧徽标B在右侧。
<div class="navbar navbar-fixed-top navbar-custom ">
<div class="container" >
<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>
<a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Menu Item 1</a></li>
<li><a href="#contact">Menu Item 2</a></li>
<li><a href="#about">Menu Item 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
</ul>
</div>
</div>
</div>
#1楼
参考：https://stackoom.com/question/1KnZP/具有左-中或右对齐项的Bootstrap-NavBar
#2楼
2019 Update 2019更新
Bootstrap 4 引导程序4
Now that Bootstrap 4 has flexbox, Navbar alignment is much easier. 现在，Bootstrap 4具有flexbox，导航栏对齐变得更加容易。 Here are updated examples for left , right and center in the Bootstrap 4 Navbar , and many other alignment scenarios demonstrated here . 这是Bootstrap 4导航栏中左 ， 右和中心的更新示例，并在此 演示了许多其他对齐方案 。
The flexbox , auto-margins , and ordering utility classes can be used to align Navbar content as needed. flexbox ， auto-margins和ordering实用程序类可用于根据需要对齐Navbar内容。 There are many things to consider including the order and alignment of Navbar items (brand, links, toggler) on both large screens and the mobile/collapsed views. 需要考虑很多事情，包括大屏幕和移动/折叠视图上的Navbar项（品牌，链接，切换器）的顺序和对齐方式。 Don't use the grid classes (row,col) for the Navbar . 请勿对Navbar使用网格类（row，col） 。
Here are various examples... 这是各种示例...
Left, center(brand) and right links: 左，中（品牌）和右链接：
<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://www.codeply.com/go/qhaBrcWp3v http://www.codeply.com/go/qhaBrcWp3v
Another BS4 Navbar option with center links and overlay logo image : 另一个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>
Or , these other Bootstrap 4 alignment scenarios: 或者 ，这些其他Bootstrap 4对齐方案：
brand left, dead center links, (empty right) 左品牌，空中心链接，（右空白）
brand and links center, icons left and right 品牌和链接中心，左右图标
More Bootstrap 4 examples : 更多的Bootstrap 4示例 ：
toggler left on mobile, brand right 移动设备上的切换键左，品牌右
center brand and links on mobile 中心品牌和移动链接
right align links on desktop, center links on mobile 在桌面上右对齐链接，在手机上居中链接
left links & toggler, center brand, search right 左侧链接和切换器，中心品牌，右侧搜索
Also see: Bootstrap 4 align navbar items to the right 另请参阅： Bootstrap 4将导航栏项目向右对齐
Bootstrap 4 navbar right align with button that doesn't collapse on mobile Bootstrap 4导航栏右对齐，不会在移动设备上折叠的按钮
Center an element in Bootstrap 4 Navbar 在Bootstrap 4导航栏中将元素居中
Bootstrap 3 引导程序3
Option 1 - Brand center, with left/right nav links: 选项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 http://bootply.com/98314
Option 2 - Left, center and right nav links: 选项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://www.bootply.com/SGYC6BWeBK http://www.bootply.com/SGYC6BWeBK
Option 3 - Center both brand and links 选项3-将品牌和链接置于中心
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
@media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://www.codeply.com/go/1lrdvNH9GI http://www.codeply.com/go/1lrdvNH9GI
More examples: 更多示例：
Left brand, center links 左品牌，中心链接
Left toggler, center brand 左拨杆，中心品牌
For 3.x also see nav-justified: Bootstrap center navbar 对于3.x，另请参见nav-justified： 引导中心navbar
Center Navbar in Bootstrap Bootstrap中的中心导航栏
Bootstrap 4 align navbar items to the right Bootstrap 4将导航栏项目向右对齐
#3楼
I found the following was a better solution depending on the content of your left, center and right items. 我发现以下是一个更好的解决方案，具体取决于您左，中和右项目的内容。 A width of 100% without a margin caused overlapping of divs and was preventing anchor tags to work correctly - that is without the messy use of z-indexes. 100％的宽度没有边距会导致div重叠，并且会阻止定位标记正常工作-也就是说，不会乱用z-indexes。
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
margin: auto;
margin-left: 48%;
}
#4楼
I needed something similar (left, center and right aligned items), but with ability to mark centered items as active. 我需要类似的东西（左，中和右对齐的项目），但能够将居中的项目标记为活动状态。 What worked for me was: 对我有用的是：
http://www.bootply.com/CSI2KcCoEM 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: 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;
}
}
#5楼
Smack my head, just reread my answer and realized the OP was asking for two logo's one on the left one on the right with a center menu, not the other way around. 拍了拍我的头，只是重新读了我的答案，才意识到OP要求在左边有两个徽标，在右边有一个中心菜单，而不是相反。
This can be accomplished strictly in the HTML by using Bootstrap's "navbar-right" and "navbar-left" for the logos and then "nav-justified" instead of "navbar-nav" for your UL. 通过在Bootstrap的徽标中使用“ navbar-right”和“ navbar-left”，然后在UL中使用“ nav-justified”而不是“ navbar-nav”，可以严格地在HTML中完成此操作。 No addtional CSS needed (unless you want to put the navbar-collapse toggle in the center in the xs viewport, then you need to override a bit, but will leave that up to you). 无需其他CSS（除非您想将navbar-collapse切换开关放置在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>
Bootply: http://www.bootply.com/W6uB8YfKxm Bootply： http ： //www.bootply.com/W6uB8YfKxm
For those who got here trying to center the "brand" here is my old answer: 对于那些来到这里尝试以“品牌”为中心的人，这是我的老答案：
I know this thread is a little old, but just to post my findings when working on this. 我知道这个线程有些旧，但是只是为了发布我的发现。 I decided to base my solution on skelly's answer since tomaszbak's breaks on collaspe. 自从tomaszbak打破collaspe以来，我决定以skelly的回答为基础。 First I created my "navbar-center" and turned off float for the normal navbar in my CSS: 首先，我在CSS中创建了“ navbar-center”并关闭了普通navbar的float：
.navbar-center
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
.navbar-brand{
float:none;
}
However the issue with skelly's answer is if you have a really long brand name (or you wanted to use an image for your brand) then once you get to the the sm viewport there could be overlapping due to the absolute position and as the commenters have said, once you get to the xs viewport the toggle switch breaks (unless you use Z positioning but I really didn't want to have to worry about it). 但是，skelly答案的问题是，如果您的品牌名称很长（或者您想为品牌使用图片），那么一旦到达sm视口，由于绝对位置和评论者的原因，它们可能会重叠说，一旦进入xs视口，切换开关就会中断（除非您使用Z定位，但我真的不想为此担心）。
So what I did was utilize the bootstrap responsive utilities to create multiple version of the brand block: 因此，我所做的就是利用引导响应实用程序创建品牌块的多个版本：
<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>
So now the lg and md viewports have the brand centered with links to the left and right, once you get to the sm viewport your links drop to the next line so that you don't overlap with your brand, and then finally at the xs viewport the collaspe kicks in and you are able to use the toggle. 因此，现在lg和md视口的品牌集中在左侧和右侧，一旦进入sm视口，链接将落至下一行，以免与品牌重叠，最后在xs视口中的collaspe插入，您就可以使用切换开关了。 You could take this a step further and modify the media queries for the navbar-right and navbar-left when used with navbar-brand so that in the sm viewport the links are all centered but didn't have the time to vet it out. 您可以更进一步，并在与navbar-brand一起使用时修改navbar-right和navbar-left的媒体查询，以便在sm视口中所有链接都居中，但没有时间对其进行审核。
You can check my old bootply here: www.bootply.com/n3PXXropP3 您可以在此处检查我的旧引导程序：www.bootply.com/n3PXXropP3
I guess having 3 brands might be just as much hassle as the "z" but I feel like in the world of responsive design this solution fits my style better. 我想拥有3个品牌可能和“ z”一样麻烦，但我觉得在自适应设计的世界中，这种解决方案更适合我的风格。
#6楼
This is a dated question but I found an alternate solution to share right from the bootstrap github page. 这是一个过时的问题，但是我找到了一个替代解决方案，可以从bootstrap github页面直接共享。 The documentation has not been updated and there are other questions on SO asking for the same solution albeit on slightly different questions. 该文档尚未更新，因此在SO上还有其他问题要求相同的解决方案，尽管问题稍有不同。 This solution is not specific to your case but as you can see the solution is the <div class="container"> right after <nav class="navbar navbar-default navbar-fixed-top"> but can also be replaced with <div class="container-fluid" as needed. 此解决方案并非特定于您的情况，但是您可以看到，解决方案是在<nav class="navbar navbar-default navbar-fixed-top">后的<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>
The solution was found on a fiddle on this page: https://github.com/twbs/bootstrap/issues/18362 在此页面的小提琴中找到了解决方案： https : //github.com/twbs/bootstrap/issues/18362
and is listed as a won't fix in V3. 并且在V3中被列为“无法修复”。
3568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
