twitter-bootstrap Bootstrap - 更改导航栏的方向
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/14021784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - Change direction of the navbar
提问by Roman
I've using Twitter bootstrap and trying to align the navbars' text to the right, i.e - that the "brand" will appear on the right, and all else to the left of it. (For right-to-left website).
我一直在使用 Twitter 引导程序并尝试将导航栏的文本向右对齐,即 - “品牌”将出现在右侧,而其他所有内容都将出现在它的左侧。(对于从右到左的网站)。
Any ideas how this can be accomplished?
任何想法如何实现?
采纳答案by xyz
Apply float:rightto div with class as navbar-inner
将float:right类应用于div asnavbar-inner
<div class="navbar-inner" style="float:right">
Like
喜欢
<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>
回答by Rajarshi
pull-right and pull-left are default bootstrap classes that can help you achieve that without having to write your own css. For example,
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]
回答by Reno
Update these classes in bootstrap.css file
在 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;
}
回答by Facundo Maximiliano Vergara
only change that... float:right to float:left
只改变那个... 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;
}
回答by javad
The better solution is to change the value of dirin the bodytag:
更好的解决办法是改变的值dir在body标签:
<body dir="rtl">
...
</body>
回答by Meysam Ebrahimi
Apply float:right to ul with class as .navbar-nav
将 float:right 应用到类为 .navbar-nav 的 ul
.navbar-nav{float:right;margin:0}.navbar-nav>li{float:right}

