Html 如何在 Twitter 引导程序中将导航栏品牌放在右侧？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20568473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put navbar brand to right side in twitter bootstrap?
提问by hamidfzm
I need a complete right-aligned navbar in bootstrap but the problem is my brand is in the left side but I need it to go to right side. Although I can put other list items using navbar-rightoption to the right side.
我在引导程序中需要一个完整的右对齐导航栏，但问题是我的品牌在左侧，但我需要它到右侧。虽然我可以使用navbar-right选项将其他列表项放在右侧。
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand pull-right" href="#">CesaStack</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">????</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
回答by friggle
Move the brand above the navbar-header and give it the class navbar-right.
将品牌移动到导航栏标题上方，并为其设置导航栏右侧的类。
This puts your brand on right when in desktop views, and it goes left in mobile views, properly keeping the menu button as the rightmost element.
这使您的品牌在桌面视图中处于正确位置，而在移动视图中则位于左侧，正确地将菜单按钮保留为最右侧的元素。
<nav class="navbar navbar-default" role="navigation">
<a class="navbar-brand navbar-right" href="#">CesaStack</a>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<!-- snip -->
</div>
</nav>
回答by davidkonrad
The brand is on the left side, even though it has the class .pull-right, because it is contained in
品牌在左侧，即使它有 class .pull-right，因为它包含在
<div class="navbar-header">
..
<a class="navbar-brand pull-right" href="#">CesaStack</a>
</div>
if you place it outside, just after .navbar-header-></div>, then it will be aligned to the right as it should.
如果你把它放在外面，就在.navbar-header-> 之后</div>，那么它会像它应该的那样向右对齐。
See your code in this fiddle -> http://jsfiddle.net/9BfjX/
在这个小提琴中查看您的代码-> http://jsfiddle.net/9BfjX/
回答by dsmithco
What you need to use is navbar-rightnot pull-right
你需要使用的navbar-right不是右拉
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
**LOGO OR HEADER NAME HERE**
</div>
<div class="navbar-collapse navbar-right collapse">
**OTHER MENU OR FORM HERE**
</div><!--/.navbar-collapse -->
</div>
回答by Nikit Barochiya
<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-right">
<li><a href="#">right</a></li>
<li><a href="#">right</a></li>
<li><a href="#">right</a></li>
</ul>
</div>
</nav>
