Qual è il mistero del triangolo del menu a discesa Bootstrap?

Question

Sto cercando di capire la differenza tra i menu a discesa di Bootstrap di Twitter quando sono inclusi in una barra di navigazione e quando non lo sono.

Quando sono inclusi in una barra di navigazione, viene visualizzato un piccolo triangolo/freccia sul menu espanso. Questo triangolo non viene mostrato quando viene utilizzata alcuna barra di navigazione:

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

Ho appena trascorso due ore esplorando il css/html, io ancora non capisco perché ...

Qualche idea?

Answer 1

Ci sono due stili applicati al menu a discesa quando ci si trova all'interno dell'elemento nav. Essi sono i seguenti:

.navbar .nav > li > .dropdown-menu::before { 
    position: absolute; 
    top: -7px; 
    left: 9px; 
    display: inline-block; 
    border-right: 7px solid transparent; 
    border-bottom: 7px solid #CCC; 
    border-left: 7px solid transparent; 
    border-bottom-color: rgba(0, 0, 0, 0.2); 
    content: ''; 
} 
.navbar .nav > li > .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: ''; 
    } 

Essi creano due triangoli uno sopra l'altro grigio chiaro, l'altro grigio scuro. Se si utilizzano gli strumenti di sviluppo di Chrome, è possibile esaminare questi elementi e disattivare diversi stili per ottenere un'idea di ciò che stanno facendo. Questi stili non vengono applicate senza la barra di navigazione

Answer 2

Il triangolo può essere generato dalla seguente sintassi:

<b class="caret dropdown-toggle"></b> 

Answer 3

Basta aggiungere questo al CSS e si sarà in grado di utilizzare a discesa freccia del menu senza porre la discesa all'interno una barra di navigazione

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

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

.dropdown-menu:before, .dropdown-menu.pull-right:before { 
right: 12px; 
left: auto; 
} 

.dropdown-menu::after, .dropdown-menu.pull-right:after { 
right: 13px; 
left: auto; 
}