引导NavBar与左，中间和右alignment的项目
在Bootstrap中 ，创build导航栏的平台最友好的方式是什么？左侧是Logo A，中间是菜单项，右侧是Logo B？
这是我到目前为止所尝试的，并且最终被alignment，使得标志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> 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; }
选项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
选项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
对于3.x也见导航alignment： 引导中心导航栏
2017更新
Bootstrap 4
现在BS 4有flexbox，alignment要容易得多。 这里是Bootstrap 4 Navbar中左，右和中心的更新示例 。
我需要类似的东西（左，中，右alignment的项目），但有能力标记中心项目为活动。 对我有效的是：
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”作为标识，然后使用“nav-justified”而不是“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>
Bootply： http ： //www.bootply.com/W6uB8YfKxm
对于那些试图把“品牌”放在这里的人来说，我的回答是：
我知道这个线程是有点老，但只是为了发表我的发现，当这个工作。 自从tomaszbak在collaspe上rest以后，我决定把我的解决scheme放在skelly的答案上。 首先，我创build了我的“navbar-center”，并closures了我的CSS中的普通导航栏的float：
.navbar-center { position: absolute; width: 100%; left: 0; text-align: center; margin: auto; } .navbar-brand{ float:none; }
然而，skelly的答案是如果你有一个很长的品牌名称（或者你想为你的品牌使用一个图像），那么一旦你到达了sm视口，由于绝对的位置，可能会重叠，作为评论者说，一旦你到达XS视口切换开关打破（除非你使用Z位置，但我真的不想担心它）。
所以我所做的就是利用引导响应实用程序来创build品牌块的多个版本：
<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视口collaspe踢，你可以使用切换。 您可以更进一步，在navbar-brand中使用navbar-right和navbar-left时修改媒体查询，以便在sm视口中链接都处于中心位置，但没有时间进行审查。
你可以在这里查看我的旧版本：www.bootply.com/n3PXXProp3
我想有3个品牌可能与“Z”一样麻烦，但我觉得在响应式devise的世界里，这个解决scheme更符合我的风格。
Bootstrap 4（从Alpha 6开始）
Navbar是用flexbox构build的！ 而不是浮动，你需要flexbox和marginfunction。
右alignment使用justify-content-end在collapse div上：
<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
我发现以下是一个更好的解决scheme，取决于您的左，中，右项目的内容。 没有边距的100％的宽度会导致div的重叠，并阻止锚标签正常工作 – 这是没有z – 索引的凌乱使用。
.navbar-brand { position: absolute; width: 100%; left: 0; margin: auto; margin-left: 48%; }
这是一个过时的问题，但我发现一个备用的解决scheme，从引导github页面共享权利。 文档没有更新，还有其他问题要求相同的解决scheme，尽pipe在稍有不同的问题。 这个解决scheme并不是特定于你的情况，但正如你可以看到解决scheme是在<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="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>
解决方法是在这个页面上find一个小提琴： https ： //github.com/twbs/bootstrap/issues/18362
并被列为一个不会在V3固定。
