Twitter Bootstrap Navigation Bar - 右寄せドロップダウンメニュー

Question

私はPHPサイトでTwitter Bootstrap（v2.1.1）を使用しています。ユーザーがサイトにログインしたり、サイトからログアウトすると、ナビゲーションバーには異なるコンテンツが表示されるため、PHPスクリプトでナビゲーションバーを動的に生成しています。

最後のドロップダウンメニューを画面の右側に揃えたいが、それまでできなかった。私は右に整列するダウンメニュー2ドロップをしたいと思います

http://jsfiddle.net/fmdataweb/AUgEA/

：ここでは単純化されたバージョンを示すjsFiddleです。最後のドロップダウンのためのコード他のドロップダウンの場合と同じである：

<li class="dropdown pull-right"> 
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">Menu 2<b class="caret"></b></a> 
<ul class="dropdown-menu"> 
<li><a href="propertiesSearch.php">Logout</a></li> 
</ul> 
</li>   

私はそれを試してみたchaging：

<li class="dropdown pull-right"> 

が、それは違いはありません。あなたはフォームと<p>テキストでできるように、誰もが右にドロップダウンメニューをプルする方法を知っていますか？

Answer 1

.pull-rightクラスをul要素instに変更する必要がありますead of li。

HTML

<ul class="nav pull-right"> 
    <li class="dropdown"> 
    <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown"> 
     Menu 2 
     <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
     <li><a href="propertiesSearch.php">Logout</a></li> 
    </ul> 
    </li> 
</ul> 

---

バージョン2.1.1

私は必要なJavaScriptプラグイン（ブートストラップ-dropdown.js）、Twitterのブートストラップの最新バージョンを含む、あなたのコードを書き直しました（2.1.1）とレスポンシブデザインのサポート。

http://jsfiddle.net/caio/gvw7j/

あなたは上記のリンクに対応し、メニューが表示された場合は、このリンクで "ワイド結果" を見ることができます：

.pull-right { 
    float: right !important; 
} 

：

http://jsfiddle.net/caio/gvw7j/embedded/result/

.pull-rightがで定義されています

---

バージョン3.1.1

このクラスに変更はありませんでした。 helpers classesセクションが表示されます。

ただし、ドキュメントでは、.navbar-rightクラスを使用することをお勧めします。これは、pull-rightクラスとは異なり、特定の最適化が行われているためです。

Answer 2

代わりの左にli要素を引っ張って、単にあなたが右の独自のulリスト内に整列し、代わりにそのようにそれを引くことを望むその要素含まれています

HTML

<ul class="nav pull-right"> 
    <li class="dropdown"> 
     <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">Menu 2<b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="propertiesSearch.php">Logout</a></li> 
     </ul> 
    </li>  
</ul> 

を

デモ：http://jsfiddle.net/AUgEA/1/

Answer 3

ブートストラップ3を使用している場合、.navbar-rightはトリックを行います。あなたがしようとここに来た場合のために例えば。

、

<ul class="nav navbar-nav navbar-right"> 
. 
. 
</ul> 

Answer 4

通常のブートストラップ.dropdown-menuとませ.navを、右揃えとブートストラップ3を使用している、追加するための正しいクラスが.dropdown-menu-rightですここで

はbootstrap documentationです：

<ul class="dropdown-menu dropdown-menu-right"> 
    ... 
</ul>