बूटस्ट्रैप ड्रॉपडाउन मेनू त्रिकोण का रहस्य क्या है?

Question

मैं ट्विटर बूटस्ट्रैप ड्रॉपडाउन मेनू के बीच अंतर को समझने की कोशिश कर रहा हूं जब उन्हें एक navbar के भीतर शामिल किया जाता है और जब वे नहीं होते हैं।

जब उन्हें एक navbar में शामिल किया जाता है, तो विस्तारित मेनू पर थोड़ा ऊपर त्रिकोण/तीर दिखाया जाता है। इस त्रिकोण से पता चला नहीं है जब कोई नेवबार प्रयोग किया जाता है:

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

मैं सिर्फ सीएसएस/HTML की खोज दो घंटे बिताए, मैं अभी भी क्यों समझ में नहीं आता ...

किसी भी विचार?

Answer 1

नौसेना तत्व के अंदर ड्रॉपडाउन मेनू पर दो शैलियों को लागू किया गया है।

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

वे एक दूसरे से एक हल्के भूरे रंग के, दूसरे गहरे भूरे रंग के शीर्ष पर दो त्रिकोण बनाने: वे इस प्रकार हैं। यदि आप क्रोम डेवलपर टूल का उपयोग करते हैं तो आप इन तत्वों का निरीक्षण कर सकते हैं और वे क्या कर रहे हैं, इसके बारे में महसूस करने के लिए अलग-अलग शैलियों को बंद कर सकते हैं। इन शैलियों नेवबार के बिना लागू नहीं कर रहे हैं

Answer 2

त्रिकोण निम्न सिंटैक्स द्वारा उत्पन्न किया जा सकता है:

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

Answer 3

बस सीएसएस को यह जोड़ सकते हैं और आप लटकती अंदर रखने के बिना लटकती मेनू तीर का उपयोग करने में सक्षम होंगे एक एनवी बार

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