将bootstrap导航栏对齐到右侧 [英] Align a bootstrap navbar to the right

问题描述

我试图将导航条移动到右侧，尝试了navbar-right和pull-right，但我得到的都是这样 -

 < div class =container> 
< h1 align =center>< a href =＃>我的网站< / 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。

解决方案

您可以通过扩展Bootstrap可以轻松实现这种行为。

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

我所做的只是添加了一个从右到左类到< ul> ，CSS样式应该是：

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

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.

I get the same results for navbar-right and pull-right. How can this be fixed?

Thanks!

解决方案

you can easily have that behavior by just extending the Bootstrap.

Demo on JSBin: http://jsbin.com/zaniz/1/edit?html,css,output

all I did was added a right-to-left class to the <ul> and the CSS Style should be:

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

这篇关于将bootstrap导航栏对齐到右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！