twitter-bootstrap 将引导程序导航栏向右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22297047/
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
Align a bootstrap navbar to the right
提问by thomas
I'm trying to move my navbar to the right, tried both navbar-right, and pull-right, but all I get is something like this -
我试图将我的导航栏向右移动，同时尝试了导航栏右移和右拉，但我得到的只是这样的 -
<div class="container" >
<h1 align="center"><a href="#">My Site</a></h1>
<div class="container" >
<ul class="nav nav-tabs navbar-right" >
<li class="active"><a href="#">tab1</a></li>
<li><a href="#">tab2</a></li>
<li><a href="#">tab3</a></li>
<li><a href="#">tab4</a></li>
</ul>
</div>
<br>
Hello
</div>
So there are 2 problems here - The grey line underneath the tabs is much shorter, and the tabs themselves aren't aligned properly - I want "tab1" to be the rightmost one, and correspondingly "tab4" the leftmost one.
所以这里有两个问题 - 选项卡下方的灰线要短得多，并且选项卡本身没有正确对齐 - 我希望“tab1”是最右边的，相应地“tab4”是最左边的。
I get the same results for navbar-right and pull-right. How can this be fixed?
我对导航栏右和拉右得到相同的结果。如何解决这个问题？
Thanks!
谢谢！
回答by balexandre
you can easily have that behavior by just extending the Bootstrap.
您只需扩展 Bootstrap 即可轻松实现该行为。
Demo on JSBin: http://jsbin.com/zaniz/1/edit?html,css,output
JSBin 上的演示：http://jsbin.com/zaniz/1/edit?html,css,output
all I did was added a right-to-leftclass to the <ul>and the CSS Style should be:
我所做的只是向 中添加了一个right-to-left类，<ul>CSS 样式应该是：
.right-to-left li { float: right; }
回答by Samus_
I've added the following rules to solve the problem without losing the border on the ul or reordering the markup:
我添加了以下规则来解决问题，而不会丢失 ul 上的边框或重新排序标记：
.nav-tabs-right { text-align: right; }
.nav-tabs-right > li { display: inline-block; float: none; }
you can apply that to .nav-tabs directly but I prefer to create a separate class to replace .navbar-right
您可以将其直接应用于 .nav-tabs 但我更喜欢创建一个单独的类来替换 .navbar-right
回答by sumitb.mdi
You can try this; if you want that gray line to cover the entire page horizontly
你可以试试这个；如果您希望该灰线水平覆盖整个页面
<div class="container" >
<h1 align="center"><a href="#">My Site</a></h1>
<div class="container" >
<ul class="nav nav-tabs" >
<li class="active pull-right" ><a href="#">tab1</a></li>
<li class="pull-right"><a href="#">tab2</a></li>
<li class="pull-right"><a href="#">tab3</a></li>
<li class="pull-right"><a href="#">tab4</a></li>
</ul>
</div>
<br>
Hello
</div>
回答by Matthew Shine
I just added a float: right;(equal to pull-right) style to the <ul>and it seemed to produce the desired output, as for the tab1 being the rightmost one, it's probably best to reorder your markup to say:
我刚刚添加了一个float: right;（等于pull-right）样式<ul>，它似乎产生了所需的输出，至于 tab1 是最右边的，最好重新排序您的标记说：
<ul class="nav nav-tabs navbar-right" >
<li class="active"><a href="#">tab4</a></li>
<li><a href="#">tab3</a></li>
<li><a href="#">tab2</a></li>
<li><a href="#">tab1</a></li>
</ul>
