2012-07-24 15 views
13

Mam przyciski rozwijania programu startowego twitter, działające pomyślnie, ale mam mały problem. Czarna navbar tutaj:dodając strzałkę do rozwijanej pigułki na twitter bootstrap?

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

Ma schludny mały strzałkę gdy rozwijana otwiera się, prawda? Cóż, używam pigułek tuż poniżej i nie mają tej strzały. Wygląda na to, że strzałka jest dostępna tylko podczas korzystania z paska nawigacyjnego, którego nie potrzebuję.

Czy ktoś wymyślił sposób na dodanie strzałek do pigułek? :(

Odpowiedz

32

Zakładając cię „re powołując się na białą strzałką wskazującą w górę, gdy pozycja menu zostanie kliknięty, styl szukasz znajduje się na linii 3907 w 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: ''; 
} 

można spróbować kopiując ten styl i R emulując część deklaracji stylu i modyfikując ją tak, aby pasowała do twojego kodu.

+0

To jest PERFEKTA! Dziękuję :) Po prostu utworzyłem kopię, usunąłem .navbar i nie działa !!!! – user1227914

+0

Działa to, ale ramka wokół strzałki nie jest wyświetlana. Jakieś pomysły, co powinienem zrobić? – Anthony

+1

@Anthony To dlatego, że musisz również uwzględnić styl :: before, który faktycznie tworzy obramowanie wokół strzałki. :) Zobacz kilka innych odpowiedzi na tej stronie. Szczerze mówiąc, ten zaakceptowany nie jest najlepszy. – smajl

3

Nie wiesz co pigułki, ale jeśli masz bootstrap dodaniu strzałek po prostu oddanie nigdzie w kodzie.

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

Czy to co masz na myśli?

+0

Tak, to strzałka w dół, pomyślałem, że jedna, ale problem jest w górę dod że wygląda odwróconego „V” z menu, które następnie otwiera się w kierunku powyższego linku. – user1227914

+1

Te tworzone są z :: before (czyli css3), więc w zależności od używanej przeglądarki, będzie ona lub nie będzie się pojawiać:/ –

+1

Niż tony kumpel :) –

15

Oto wyrafinowanie odpowiedzi Jason Towne.

Działa to poprawnie, jeśli menu zostało pociągnięte w prawo.

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

Oto przykład użycia.

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

Świetna pomoc .. !!! Rozwiązałem mój problem za pomocą Twojej odpowiedzi. Dzięki – Naju

0

Jest to praca dla mnie


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