logo标签列表

Bootstrap - 改变导航栏的方向

twitter-bootstrapright-to-leftdirection
21
我正在使用Twitter Bootstrap并尝试将导航栏中的文本右对齐，即“brand”出现在右侧，其他所有内容都在其左侧（用于从右到左的网站）。
有什么办法可以实现这一点吗？
6个回答
18

pull-right和pull-left是Bootstrap默认的类，可以帮助您在不编写自己的CSS代码的情况下实现此目的。例如：

    <div class="navbar pull-right"></div> [equivalent to float:right]
    <div class="navbar pull-left"></div>  [equivalent to float:left]
当您想要从右到左设计导航栏时，这是正确的答案。特别适用于RTL语言。 - Hamed Rezaei
13

将class为navbar-inner的div应用float:right

<div class="navbar-inner" style="float:right">

就像

<div class="navbar">
    <div class="navbar-inner">    
        <div style="float:right">
        <a class="brand" href="#">Title</a>
        <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        </ul>
    </div>
</div>

演示现场

仅供参考 - 在此编辑后，项目的顺序应该被反转（例如“.brand”现在应该是div中的最后一个）。 - Roman
1
@roman：如果您想更新订单，只需相应地更新<li>中的订单即可。 - Ajinkya
3

请在bootstrap.css文件中更新这些类

.navbar .nav {
    display: block;
    float: right;
    left: 0;
    margin: 0 10px 0 0;
    position: relative;
}


.navbar .brand {
    color: #777777;
    display: block;
    float: right;
    font-size: 20px;
    font-weight: 200;
    margin-left: -20px;
    padding: 10px 20px;
    text-shadow: 0 1px 0 #FFFFFF;
}


.navbar .nav > li {
    float: right;
}
谢谢！上面有一个更简单的解决方案。 - Roman
@Reno：这也会影响使用这些样式的所有其他组件。 - Ajinkya
它将影响所有的.navbar元素。这取决于你的需求。 - Reno
1
更好的解决方案是更改标签中dir的值：
<body dir="rtl">
...
</body>
不工作的导航栏 - Abdulrahman Alsari
0

只需要将 float:right 改为 float:left

.navbar-toggle {
  position: relative;
  float: left;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
-1
将float:right应用于类为.navbar-nav的ul。
.navbar-nav{float:right;margin:0}.navbar-nav>li{float:right}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接