Hinzufügen des Pfeils zu Dropdown-Pillen für Twitter Bootstrap?

Ich habe die Twitter-Bootstrap Dropdown-Tasten erfolgreich funktioniert, aber ich habe ein kleines Problem. Der schwarze navbar hier:Hinzufügen des Pfeils zu Dropdown-Pillen für Twitter Bootstrap?

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

Es hat einen ordentlichen kleinen Pfeil, wenn die Dropdown öffnet, nicht wahr? Nun, ich benutze die Pillen direkt darunter und sie haben diesen Pfeil nicht. Es scheint, dass der Pfeil nur bei Verwendung der Navbar enthalten ist, die ich nicht brauche.

Hat jemand einen Weg gefunden, die Pfeile zu den Pillen hinzuzufügen? :(

Quelle

2012-07-24 user1227914

Sie Angenommen sind auf den weißen Pfeil bezieht, die nach oben zeigt, wenn ein Menüpunkt angeklickt wird, für den Stil Sie suchen ist auf der Linie 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: ''; 
}

Sie können versuchen, diesen Stil und r Kopieren Entfernen Sie den .navbar Teil der Style-Deklaration und ändern Sie ihn an Ihren Code.

Quelle

2012-07-24 14:56:34

Das ist PERFEKT! Danke :) Ich habe einfach eine Kopie erstellt, die .navbar entfernt und es funktioniert nicht !!!! – user1227914

Das funktioniert, aber der Rand um den Pfeil wird nicht angezeigt. Irgendwelche Ideen, was ich tun sollte? – Anthony

@Anthony Dies liegt daran, dass Sie auch den :: before-Stil einfügen müssen, der den Rand um den Pfeil herum erzeugt. :) Siehe einige andere Antworten auf dieser Seite. Ehrlich gesagt, ist dieser akzeptiert nicht der beste. – smajl

nicht sicher, was die Pillen sind, aber wenn Sie Bootstrap Sie auf die Pfeile hinzufügen, indem Sie einfach in Ihrem Code, um dieses überall setzen.

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

Ist das, was Sie?

bedeutete

Quelle

2012-07-24 14:53:25

Ja, das ist der Pfeil nach unten, ich, dass man herausgefunden, aber das Problem ist, die nach oben arriv, die wie ein umgekehrten „v“ aus der aussieht Menü, das sich dann öffnet, in Richtung des obigen Links. – user1227914

Diese werden mit :: before erstellt (was css3 ist). Je nachdem, welchen Browser du verwendest, wird es nicht angezeigt:/ –

Danke ein ton buddy :) –

Hier ist eine Verfeinerung zu Jason Townes Antwort.

Dies funktioniert ordnungsgemäß, wenn das Menü nach rechts gezogen wurde.

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

Hier ist ein Anwendungsbeispiel.

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

Quelle

2013-03-21 11:56:34

Große Hilfe .. !!! Ich löste mein Problem mit Ihrer Antwort. Danke – Naju

Dies ist Arbeit für mich

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

Quelle

2013-07-02 16:58:23 harry34

Hinzufügen des Pfeils zu Dropdown-Pillen für Twitter Bootstrap?

Antwort

Verwandte Themen