拍我的头，只是重读我的回答，意识到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: http://www.bootply.com/W6uB8YfKxm
对于那些试图以“品牌”为中心的人，这里是我的老答案:
我知道这个帖子有点老了，但只是为了发布我在工作时的发现。我决定基于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>
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. 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.
你可以在这里查看我的旧bootply: www.bootply.com/n3PXXropP3
我想拥有3个品牌可能和“z”一样麻烦，但我觉得在响应式设计的世界里，这个解决方案更适合我的风格。
