bootstrap col-md-12與寬度100％顯示/隱藏div時的行爲不同

我試圖實現類似於自動完成的下拉菜單。我注意到，當我使用col-md-12和100％寬度時，它的行爲不同。下面有兩個樣本。bootstrap col-md-12與寬度100％顯示/隱藏div時的行爲不同

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

它使用COL-MD-12。當我開始輸入內容時，下面的文本被壓低了。

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

<div class="result_optins"> 

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

它使用寬度：100％。當我開始在輸入中輸入時，選項框會覆蓋下面的文本。

我找不出爲什麼它有不同的表現。任何人都可以對此有所瞭解嗎？

另外，如果我仍然想使用col-md-12，如何在第二種情況下（重疊）實現它的外觀？

來源

2016-05-01 Safecoder

Bootstrap的列有float: left，這就是它看起來不同的原因。

如果你想保持重疊，你需要通過添加一個你自己的幫助類，float: none來覆蓋Bootstrap的float: left。

在您的自定義CSS文件，你可以這樣做：

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

和類添加到適當的HTML元素：

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

來源

2016-05-01 08:42:40 Narxx

更清潔的方式來定位下拉選項是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>

來源

2016-05-01 08:42:55 marvinhagemeister

引導類col-md-12也有float: left一套有助於溢出從父子元素。由於您的搜索欄具有固定的高度，因此您需要將float-left添加到.result_optins類中，並且它的行爲方式相同。

這是pen，以便更好地瞭解發生了什麼。

來源

2016-05-01 08:46:06 Kushagra

bootstrap col-md-12與寬度100％顯示/隱藏div時的行爲不同

回答

相關問題