पतन में बूटस्ट्रैप ड्रॉपडाउन,

Question

मैं बूटस्ट्रैप 2.0.3 का उपयोग कर रहा हूं, जिसमें divs के अंदर ड्रॉप-डाउन मेनू हैं जो ढहने योग्य/विस्तार योग्य हैं। जब ड्रॉप-डाउन मेनू div को बहता है, तो वे काटा जाता है (लेकिन उन्हें नहीं करना चाहिए)। Jsfiddle वर्णन करने के लिए: http://jsfiddle.net/t3wFK/1/

बूटस्ट्रैप में 2.0.2 मेनू काट नहीं प्राप्त करता है:

#stuff.in { 
    overflow: visible; 
} 

'में: http://jsfiddle.net/u3wkK/

मैं इस प्रकार एक सीएसएस नियम का उपयोग करके आधे से एक वैकल्पिक हल मिल गया 'सीएसएस वर्ग बूटस्ट्रैप द्वारा जोड़ा जाता है जब भी' पतन 'के साथ चिह्नित एक div का विस्तार हो जाता है।

दुर्भाग्य से यह वर्कअराउंड फ़ायरफ़ॉक्स में पूरी तरह टूट जाता है।

कोई विचार? मैं बूटस्ट्रैप 2.0.2 में डाउनग्रेड करने पर विचार कर रहा हूं, लेकिन यह दर्दनाक होगा।

Answer 1

समस्या यहाँ होने के लिए कि 2.0.3 में प्रकट होता है, बूटस्ट्रैप #stuff तत्व को .collapse वर्ग लागू होता है।

.collapse { 
    overflow: hidden; 
} 

हालांकि, जब आप एक .collapse लक्ष्य का विस्तार, overflow संपत्ति hidden रहता है: बूटस्ट्रैप सीएसएस में, वहाँ एक शैली है।

यह सुनिश्चित नहीं है कि यह एक बग है या नहीं (इसे देखने के लिए कोई गड़बड़ है या नहीं, इसे देखने के लिए गहराई से देखना होगा), लेकिन .collapse.in के लिए नियम को संशोधित करना काम करेगा।

.collapse.in { 
    height: auto; /* this style already exists in bootstrap.css */ 
    overflow: visible; /* this one doesn't. Add it! */ 
} 

आप (टिप्पणी में बताया गया है अनायास ही दुष्प्रभाव हो सकता है) बूटस्ट्रैप के सीएसएस संशोधित करने के लिए नहीं करना चाहते हैं, तो आप shown और hide ईवेंट हैंडलर्स अपने #stuff तत्व को overflow संपत्ति को संशोधित करने के लिए जोड़ सकते हैं:

$('#stuff').on({ 
    shown: function(){ 
     $(this).css('overflow','visible'); 
    }, 
    hide: function(){ 
     $(this).css('overflow','hidden'); 
    } 
}); 

Answer 2

!important ध्वज का उपयोग करने का प्रयास करें, जैसा कि यह फ़ायरफ़ॉक्स में लगता है, गुण किसी कारण से अलग प्राथमिकता के साथ पढ़े जाते हैं।

http://jsfiddle.net/t3wFK/2/

.in { 
    overflow: visible !important; 
} 

Answer 3

मैंने बूटस्ट्रैप 2.1.1 के साथ अपना कामकाज करने की कोशिश की है और यह फ़ायरफ़ॉक्स 16 में टूट जाती है, केवल पहली बार काम नहीं कर रही है।

मेरे मामले में, समस्या केवल पहली बार थी जब एक आगंतुक ने ढहने योग्य तत्व खोला और इनलाइन निश्चित ऊंचाई लागू की गई थी। दूसरी बार ऊंचाई ऑटो पर सेट की गई थी।

तो मैं पाया है कि समस्या नव-पतन तत्व है जो के लिए एचटीएमएल कोड पर निर्भर करता है एक राज्य पहली बार में घोषित नहीं है:

<div class="nav-collapse"> 

:

यहाँ पहली बार में कोड है तब पहली बार बूटस्ट्रैप के विस्तार के बाद प्रदान करती है निश्चित ऊंचाई:

<div class="nav-collapse in collapse" style="height: 286px;"> 

और पहली बार ऊंचाई 0 वापस करने के लिए बंद करने के बाद:

<div class="nav-collapse collapse" style="height: 0px;"> 

दूसरी बार खुलने और यह ऑटो ऊंचाई के साथ ठीक काम करता है:

<div class="nav-collapse collapse" style="height: auto;"> 

तो वर्ग .collapse जावास्क्रिप्ट के लिए आवश्यक है स्वत: ऊंचाई निर्धारित करने के लिए:

<div class="nav-collapse collapse"> 

यह मुझे कुछ समय लिया हिसाब लगाना!

Answer 4

मैं अनुसंधान के एक बहुत कर रहा था इस सीएसएस के लिए कोड की इस पंक्ति जोड़कर समस्या का समाधान मिल गया पर, मैं https://github.com/twitter/bootstrap/pull/2423#issuecomment-13132202

.collapse.in[style="height: auto;"] {overflow: visible;} 

पर इस पाया मुझे इस काम करता है आशा के लिए यह चाल किया आपके लिए