css - 将 Bootstrap 导航栏右对齐

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>

所以这里有两个问题——选项卡下方的灰线要短得多，并且选项卡本身没有正确对齐 - 我希望“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; }