35

PHP サイトで Twitter Bootstrap (v2.1.1) を使用しています。ユーザーがサイトにログインしているか、サイトからログアウトしているかによって、ナビゲーション バーのコンテンツが異なるため、php スクリプトで動的にナビゲーション バーを生成しています。

最後のドロップダウン メニューを画面の右側に揃えたいのですが、今のところできていません。単純化されたバージョンを示す jsFiddle を次に示します。

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

メニュー 2 ドロップダウンを右揃えにしたいと思います。最後のドロップダウンのコードは、他のドロップダウンと同じです。

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

私はそれを次のように変更しようとしました:

<li class="dropdown pull-right">

しかし、それは違いはありません。<p>フォームやテキストでできるように、ドロップダウン メニューを右に引っ張る方法を知っている人はいますか?

4

4 に答える 4

78

.pull-rightクラスをulの代わりに element に変更する必要があり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 プラグイン (bootstrap-dropdown.js)、最新バージョンの Twitter Bootstrap (2.1.1)、レスポンシブ デザインのサポートのみを含めてコードを書き直しました。

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

上記のリンクでレスポンシブ メニューが表示されている場合は、このリンクで「ワイド結果」を確認できます。

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

.pull-rightによって定義されます。

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

バージョン 3.1.1

このクラスに変更はありませんでした。ヘルパー クラスセクションが表示される場合があります。

.navbar-rightただし、クラスとは異なり、いくつかの特定の最適化があるため、ドキュメントではクラスの使用を推奨していpull-rightます。

于 2012-09-17T02:08:53.113 に答える
14

Bootstrap 3を使用している人にとって.navbar-rightは、うまくいくでしょう。

たとえば、

<ul class="nav navbar-nav navbar-right">
.
.
</ul>
于 2014-04-24T03:40:59.477 に答える
11

要素を左に引っ張る代わりに、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/

于 2012-09-17T01:48:33.657 に答える