ブートストラップcol-md-12と幅100％の違いは、表示/非表示div時

Question

私はオートコンプリートと同様のドロップダウンを実装しようとしています。私はcol-md-12と幅100％を使用したときの動作が異なっていることに気付きました。私は以下の2つのサンプルを持っています。

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

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

それはCOL-MD-12を使用しています。入力を開始すると、下のテキストがプッシュダウンされました。 100％：

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

<div class="result_optins"> 

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

それは幅を使用しています。入力を開始すると、オプションボックスが下のテキストと重なって表示されます。

なぜそれが違うのかわかりませんでした。誰かがこれについていくつかの光を当てることができますか？

また、col-md-12を使用したい場合、2番目のケース（オーバーラップ）でどのように表示されるのですか？

Answer 1

ブートストラップの列にはfloat: leftが含まれているため、その外観が異なります。

オーバーラップを維持したい場合は、float: noneという独自のヘルパークラスを追加して、ブートストラップのfloat: leftを上書きする必要があります。

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

と適切なHTML要素にそのクラスを追加します：あなたが何かを行うことができ、カスタムCSSファイルで

ドロップダウンメニューのオプションを配置する

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

Answer 2

Aよりクリーンな方法は、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があります。