Bootstrap - 改变导航栏的方向
Posted
技术标签:
【中文标题】Bootstrap - 改变导航栏的方向【英文标题】：Bootstrap - Change direction of the navbar 【发布时间】：2012-12-10 21:38:26 【问题描述】：我正在使用 Twitter 引导程序并尝试将导航栏的文本向右对齐，即 - “品牌”将出现在右侧，而其他所有内容将出现在左侧。 （对于从右到左的网站）。
有什么想法可以实现吗？
【问题讨论】：
【参考方案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-navfloat:right;margin:0.navbar-nav>lifloat:right
【讨论】：
【参考方案6】：更好的解决方案是更改body标签中dir的值：
<body dir="rtl">
...
</body>
【讨论】：
以上是关于Bootstrap - 改变导航栏的方向的主要内容，如果未能解决你的问题，请参考以下文章
在不影响导航栏的情况下更改 NavigationController 的内容视图宽度