将引导导航栏对齐到右侧

Question

我正在尝试向右移动导航栏，尝试向右导航和向右拉动，但我得到的就是这样 -

<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>

所以这里有2个问题 - 标签下面的灰线要短得多，标签本身没有正确对齐 - 我希望“tab1”是最右边的一个，相应地“tab4”是最左边的一个。

我对navbar-right和pull-right得到了相同的结果。如何解决这个问题？

谢谢！

Answer 1

只需扩展Bootstrap即可轻松获得该行为。

演示JSBin：http://jsbin.com/zaniz/1/edit?html,css,output

我所做的只是向right-to-left添加了<ul>类，CSS样式应该是：

.right-to-left li { float: right; }

Answer 2

我添加了以下规则来解决问题，而不会丢失ul上的边框或重新排序标记：

.nav-tabs-right       { text-align: right; }
.nav-tabs-right > li  { display: inline-block; float: none; }

您可以直接将其应用于.nav-tabs但我更喜欢创建一个单独的类来替换.navbar-right

Answer 3

你可以试试这个;如果你想让那条灰线横向覆盖整个页面

<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>

Answer 4

我刚刚向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>