twitterのブートストラップのドロップダウンメニューに矢印を追加しますか？

Question

私はtwitterブートストラップのドロップダウンボタンを正常に動作させましたが、私には小さな問題があります。ここで黒のナビゲーションバー：

http://twitter.github.com/bootstrap/javascript.html#dropdowns

ドロップダウンが開いたとき、それは右、小ぎれいな矢印を持っていますか？まあ、私はすぐ下の丸薬を使用していて、彼らはその矢印を持っていません。矢印は、必要のないナビバーを使用するときにのみ含まれているようです。

矢印を薬に追加する方法を知った人は誰ですか？ :(

Answer 1

あなたと仮定すると、 「再メニュー項目がクリックされたとき、あなたが探しているスタイルがbootstrap.cssにライン3907上にある上向きのポイント白い矢印を参照：

.navbar .dropdown-menu::after { 
    position: absolute; 
    top: -6px; 
    left: 10px; 
    display: inline-block; 
    border-right: 6px solid transparent; 
    border-bottom: 6px solid white; 
    border-left: 6px solid transparent; 
    content: ''; 
} 

あなたはこのスタイルとrをコピーしてみてくださいすることができますスタイル宣言の一部を無効にしてコードに合わせて修正します。

Answer 2

わからない薬が何であるかが、あなたは単にあなたのコードでこれのどこを置くことによって矢印を追加するブートストラップがあれば。

<b class="caret"></b> 

はあなたが何を意味するかということですか？

Answer 3

ここでは、ジェイソンタウンの答えが洗練されています。

メニューが右に引っ張られている場合、これは正しく機能します。

.dropdown-menu-arrow::before { 
    border-bottom: 7px solid rgba(0, 0, 0, 0.2); 
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent; 
    content: ""; 
    display: inline-block; 
    left: 9px; 
    position: absolute; 
    top: -7px; 
} 

.dropdown-menu-arrow::after { 
    border-bottom: 6px solid #FFFFFF; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    content: ""; 
    display: inline-block; 
    left: 10px; 
    position: absolute; 
    top: -6px; 
} 

.btn-group.pull-right > .dropdown-menu-arrow::before { 
    left: inherit; 
    right: 9px; 
} 

.btn-group.pull-right > .dropdown-menu-arrow::after { 
    left: inherit; 
    right: 10px; 
} 

ここでは、使用例を示します。

<div class="btn-group pull-right"> 
    <a href="#" data-toggle="dropdown" class="btn dropdown-toggle"> 
    Actions 
    <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu dropdown-menu-arrow"> 
     <li>...</li> 
    </ul> 
</div> 

Answer 4

これは私のため

---

//css 
     .arrow-right > .dropdown-menu:after { 
     content: ''; 
     display: inline-block; 
     border-left: 6px solid transparent; 
     border-right: 6px solid transparent; 
     border-bottom: 6px solid #ffffff; 
     position: absolute; 
     top: -6px; 
     right: 10px; 
     } 

     .arrow-left > .dropdown-menu:after { 
     content: ''; 
     display: inline-block; 
     border-left: 6px solid transparent; 
     border-right: 6px solid transparent; 
     border-bottom: 6px solid #ffffff; 
     position: absolute; 
     top: -6px; 
     left: 10px; 
     } 

    // html 

//for left side dropdown menu 

    <div class="dropdown arrow-left"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
    ... 
    </ul> 
    </div> 


//for right side dropdown menu 

    <div class="dropdown pull-right arrow-right"> 
    <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> 
    Dropdown 
    <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
    ... 
    </ul> 
    </div>