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时的行为不同

回答

相关问题