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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 15:58:32  来源:igfitidea点击:

Bootstrap - Change direction of the navbar

twitter-bootstrapright-to-leftdirection

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

Live Demo

现场演示

回答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:

更好的解决办法是改变的值dirbody标签:

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