aggiungendo la freccia alle pillole dropdown per twitter bootstrap?

Question

I pulsanti dropdown di bootstrap di Twitter funzionano correttamente, ma ho un piccolo problema. La barra di navigazione nera qui:

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

Ha una piccola freccia ordinata quando si apre il menu a discesa, giusto? Bene, sto usando le pillole proprio qui sotto e non hanno quella freccia. Sembra che la freccia sia inclusa solo quando si utilizza la barra di navigazione, di cui non ho bisogno.

Qualcuno ha trovato un modo per aggiungere le frecce alle pillole? :(

Answer 1

si Assumendo 're facendo riferimento alla freccia bianca che punta verso l'alto quando una voce di menu viene cliccato, lo stile che stai cercando è on line 3907 in bootstrap.css:

.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: ''; 
} 

si può provare a copiare questo stile e r emettendo la porzione .navbar della dichiarazione di stile e modificandola per adattarla al codice.

Answer 2

Non sono sicuro che le pillole sono, ma se avete bootstrap si aggiungono le frecce semplicemente mettendo questo ovunque nel codice.

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

È questo che volevi dire?

Answer 3

Ecco una raffinatezza per la risposta di Jason Towne.

Questo funziona correttamente se il menu è stato tirato a destra.

.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; 
} 

Ecco un esempio di utilizzo.

<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

Questo è un lavoro per me

---

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