3

私はブートストラップ (v2) を使用しています。http://twitter.github.com/bootstrap/components.html#dropdownsから、「分割ボタン ドロップダウン」を使用できることがわかります。

Navbar では、ドロップダウンを使用できます

ただし、ナビゲーションバーに分割ドロップダウンを設定できるようには見えません。これを使用したいのは、ログインしているユーザーの名前の横にキャレットを付けることです。ユーザー名をクリックするとそのユーザーのページに移動しますが、キャレットには「サインアウト」などのアクションを含むドロップダウンが表示されます。

これは可能ですか？

4

1 に答える 1

4

私はあなたが求めていると思うことをするためにあなたのjsfiddleを修正しました。キャレットを独自のリスト項目に入れると、キャレットとユーザー名の間にぎこちないスペースができます。これを克服するには、いくつかのオーバーライドが必要になります。編集: 簡単な例として、2 つのクラスを使用して 2 つの要素間のパディングを削除しました。ただし、このプロパティを使用する必要があり!importantましたが、これはベスト プラクティスではありません。 http://jsfiddle.net/R3JKz/15/

<li>
 <a href="#" class="caret-before">
  someuser
 </a>
</li>
<li class="dropdown">    
 <a class="dropdown-toggle caret-after" data-toggle="dropdown">
  <b class="caret"></b>
 </a>
    ...
 </li>

jsfiddle には、b タグをトリガーとして使用する方法の例も含まれていますが、この方法はレイアウトを壊すため、ブートストラップ ナビゲーション バーではうまく機能しません。例：

<li class="dropdown">
 <a href="#" class="pull-left">
  A Dropdown Menu
 </a>
 <b class="caret pull-left dropdown-toggle" data-toggle="dropdown">
 </b>

これがお役に立てば幸いです。お気軽にお問い合わせください。

于 2012-12-07T18:21:47.043 に答える