bootstrap col-md-12 vs szerokość 100% zachowują się inaczej, gdy show/hide div

Question

Próbuję zaimplementować rozwijanie podobne do autouzupełniania. Zauważyłem, że zachowuje się inaczej, gdy użyłem col-md-12 a szerokość 100%. Mam dwie próbki poniżej.

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

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

wykorzystuje Col-MD-12. Kiedy zaczynam wpisywać dane wejściowe, poniższy tekst został przesunięty w dół.

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

<div class="result_optins"> 

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

wykorzystuje szerokość: 100%. Kiedy zaczynam wpisywać dane wejściowe, pole opcji pokrywa się z tekstem poniżej.

Nie mogłem zrozumieć, dlaczego zachowuje się inaczej. Czy ktoś może rzucić trochę światła na to?

Ponadto, w jaki sposób mogę osiągnąć to, co wygląda w drugim przypadku (zachodzenie na siebie), jeśli nadal chcę używać col-md-12?

Answer 1

Kolumna Bootstrap ma numer float: left i dlatego wygląda inaczej.

Jeśli chcesz zachodzić na siebie, musisz zastąpić Bootstrap o numerze float: left, dodając własną klasę pomocniczą z float: none.

W niestandardowym pliku CSS mógłby zrobić coś takiego:

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

i dodać tę klasę do właściwego elementu HTML:

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

Answer 2

znacznie czystszy sposób, aby ustawić opcje rozwijanych jest z position: absolute . Nie ma potrzeby stosowania złożonych elementów pływających ani niczego innego.

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

Klasa bootstrap col-md-12 ma również float: left zestaw, który pomaga w przepełnione element dziecko od rodzica. Ponieważ pasek wyszukiwania ma stałą wysokość, musisz dodać klasę float-left do .result_optins i zachowywać się będzie w ten sam sposób.

Oto pen dla lepszego zrozumienia tego, co się dzieje.