web-dev-qa-db-ja.com

Bootstrap-ナビゲーションバーの方向を変更する

私はTwitter bootstrapを使用して、ナビゲーションバーのテキストを右に揃えようとしています。つまり、「ブランド」が右側に表示され、それ以外はすべて左側に表示されます（右から左のWebサイトの場合）。

これをどのように達成できるかについてのアイデアはありますか？

twitter-bootstrapright-to-leftdirection
16
Roman

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>

ライブデモ

11
xyz

pull-rightとpull-leftはデフォルトですbootstrap独自のcssを書かなくてもそれを実現するのに役立つクラスです。たとえば、

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

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;
}
3
Reno

より良い解決策は、dirタグのbodyの値を変更することです。

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

変更するのは... 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;
}
0
Facundo Maximiliano Vergara