Bootstrap - 改变导航栏的方向答案

【问题标题】：Bootstrap - Change direction of the navbarBootstrap - 改变导航栏的方向
【发布时间】：2012-12-10 21:38:26
【问题描述】：

我正在使用 Twitter 引导程序并尝试将导航栏的文本向右对齐，即 - “品牌”将出现在右侧，而其他所有内容将出现在左侧。（对于从右到左的网站）。

有什么想法可以实现吗？

【问题讨论】：

标签： twitter-bootstrap right-to-left direction

【解决方案1】：

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

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

Live Demo

【讨论】：

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

【解决方案2】：

在 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;
}

【讨论】：

谢谢！上面有一个更简单的解决方案。
@Reno：它也会影响所有其他使用这种样式的组件。
它将影响所有 .navbar 元素。这取决于你需要什么。

【解决方案3】：

pull-right 和 pull-left 是默认的引导类，可以帮助您实现这一目标，而无需编写自己的 css。例如，

    <div class="navbar pull-right"></div> [equivalent to float:right]
    <div class="navbar pull-left"></div>  [equivalent to float:left]

【讨论】：

当您想从右到左设计导航栏时，这是正确的答案。专门用于 RTL 语言。

【解决方案4】：

只改变... float:right to 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;
}

【讨论】：

【解决方案5】：

将 float:right 应用于 ul，类为 .navbar-nav

.navbar-nav{float:right;margin:0}.navbar-nav>li{float:right}

【讨论】：

【解决方案6】：

更好的解决方案是更改body标签中dir的值：

<body dir="rtl">
...
</body>

【讨论】：