Fatal编程技术网

Twitter bootstrap 引导-更改导航栏的方向

twitter-bootstrap

Twitter bootstrap 引导-更改导航栏的方向,twitter-bootstrap,right-to-left,direction,Twitter Bootstrap,Right To Left,Direction,我一直在使用Twitter引导，并试图将导航栏的文本向右对齐，即“品牌”将显示在右侧，其他所有内容将显示在左侧。（适用于从右向左的网站） 有什么想法可以实现吗？将float:right应用到div，类为navbar-internal <div class="navbar-inner" style="float:right"> 像 在bootstrap.css文件中更新这些类 .navbar .nav { display: block; floa

我一直在使用Twitter引导，并试图将导航栏的文本向右对齐，即“品牌”将显示在右侧，其他所有内容将显示在左侧。（适用于从右向左的网站）

有什么想法可以实现吗？

将
float:right
应用到div，类为
navbar-internal

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



    

  • 

  • 

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

[相当于浮点：右]
[相当于浮动：左]
仅更改。。。浮动：右到浮动：左

.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;
}
应用浮动：右至ul，等级为navbar nav

.navbar-nav{float:right;margin:0}.navbar-nav>li{float:right}
更好的解决方案是更改
body
标记中
dir
的值：

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


...
仅供将来参考-编辑后，物品的顺序应该颠倒过来（例如“.brand”现在应该是div中的最后一个）@roman:如果您想更新订单，只需相应地更新
    • 中的订单即可。谢谢！上面有一个更简单的解决方案。@雷诺：它还将影响使用此样式的所有其他组件。它将影响所有.navbar元素。这取决于你需要什么。当你想从右到左设计导航栏时，这是正确的答案。特别是RTL语言。 
    <body dir="rtl">
...
</body>