bootstrap col-md-12 vs width 100% show/hide div

Question

farklı şekilde davranıyor Otomatik tamamlamaya benzer bir düşüşü uygulamaya çalışıyorum. Ben col-md-12 vs% 100 genişliğini kullandığında farklı davrandığını fark ettim. Aşağıda iki örneğim var.

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

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

Col-MD-12 kullanır. Girişe yazmaya başladığımda, aşağıdaki metin aşağı itildi. 100:%

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

<div class="result_optins"> 

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

Bu genişliği kullanır. Girişe yazmaya başladığımda, seçenekler kutusu aşağıdaki metni çakışır.

Neden farklı davrandığını anlayamadım. Bu konuda biraz ışık tutabilir mi?

Ayrıca, eğer hala col-md-12 kullanmak istiyorsam ikinci durumda (örtüşen) nasıl göründüğüne nasıl ulaşabilirim?

Answer 1

Bootstrap sütununda float: left var ve bu yüzden farklı görünüyor.

Üst üste gelmeyi sürdürmek istiyorsanız, float: none ile kendi yardımcı sınıfınızı ekleyerek Bootstrap'in float: left numarasını geçersiz kılmanız gerekir.

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

ve uygun HTML öğesine o sınıf ekleyin:: gibi bir şey yapabileceğini sizin özel CSS dosyasında

açılır seçenekleri konumlandırmak için

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

Answer 2

Daha net bir şekilde position: absolute ile . Karmaşık yüzerlere ya da başka bir şeye gerek yok.

$('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

önyükleme sınıf col-md-12 da ebeveynden çocuk eleman taşan yardımcı olur float: left kümesi vardır. Arama çubuğunuz sabit bir yüksekliğe sahip olduğundan float-left'u .result_optins sınıfına eklemeniz gerekecek ve aynı şekilde davranacaktır.

Neler olup bittiğini daha iyi anlamak için bir pen.