बूटस्ट्रैप कोल-एमडी -12 बनाम चौड़ाई 100% अलग दिखती है जब div

Question

दिखाएं/मैं स्वत: पूर्ण के समान ड्रॉप डाउन को लागू करने की कोशिश कर रहा हूं। मैंने देखा कि जब मैं col-md-12 बनाम चौड़ाई 100% का उपयोग करता हूं तो यह अलग-अलग व्यवहार करता है। मेरे पास दो नमूने हैं।

http://codepen.io/safecoder/pen/reQxZz

<div class="result_optins col-md-12"> 

यह कॉल-MD-12 का उपयोग करता है। जब मैं इनपुट में टाइप करना शुरू करता हूं, तो नीचे दिया गया पाठ नीचे धकेल दिया जाता है। 100%:

http://codepen.io/safecoder/pen/YqRqWm

<div class="result_optins"> 

.search_cont .result_optins{ 
width: 100%; 
display:none; 
} 

यह चौड़ाई का उपयोग करता है। जब मैं इनपुट में टाइप करना शुरू करता हूं, तो विकल्प बॉक्स नीचे दिए गए टेक्स्ट को ओवरलैप करता है।

मुझे पता नहीं लगा कि यह अलग-अलग व्यवहार क्यों करता है। क्या कोई इस पर रोशनी डाल सकता है?

इसके अलावा, अगर मैं अभी भी col-md-12 का उपयोग करना चाहता हूं तो मैं दूसरे मामले (ओवरलैपिंग) में कैसा दिख सकता हूं?

Answer 1

बूटस्ट्रैप के कॉलम में float: left है, और यही कारण है कि यह अलग दिखता है।

यदि आप ओवरलैपिंग रखना चाहते हैं, तो आपको float: none के साथ अपने स्वयं के एक सहायक वर्ग को जोड़कर बूटस्ट्रैप के float: left को ओवरराइड करना होगा।

अपने कस्टम सीएसएस फ़ाइल आप की तरह कुछ कर सकता है में:

.h-fn { 
    float: none !important; 
} 

और उचित HTML तत्व को उस वर्ग जोड़ें: लटकती विकल्प स्थिति

<div class="result_optins col-md-12 h-fn"> ... </div> 

Answer 2

एक अधिक स्वच्छ रास्ता position: absolute साथ है । जटिल फ्लोट या कुछ और के लिए कोई ज़रूरत नहीं है।

$('input').on('keyup', function() { 
 
    $('.result').addClass('result-visible'); 
 
}); 
 

 
$(document).on('click', function() { 
 
    $('.result').removeClass('result-visible'); 
 
});

.input-wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.result { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    display: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #eee; 
 
    min-width: 100%; 
 
} 
 

 
.result li { 
 
    padding: .2rem; 
 
    border-bottom: 1px solid #aaa; 
 
} 
 

 
.result-visible { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-wrapper"> 
 
    <input type="text" placeholder="type here"> 
 
    <ul class="result"> 
 
    <li>Result 1</li> 
 
    <li>Result 2</li> 
 
    </ul> 
 
</div> 
 
<div>Content below input</div>

Answer 3

बूटस्ट्रैप वर्ग col-md-12 भी float: left सेट जो माता पिता से बच्चे तत्व बह निकला करने में मदद करता है। चूंकि आपकी खोज बार में निश्चित ऊंचाई है, इसलिए आपको float-left.result_optins कक्षा में जोड़ना होगा और यह वैसे ही व्यवहार करेगा।

क्या हो रहा है इसकी बेहतर समझ के लिए यहां pen है।