Question

我正在尝试实现类似于自动完成的下拉菜单。我注意到当我使用col-md-12与宽度100％时，它的行为有所不同。我在下面有两个样本。

<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，如何在第二种情况下（重叠）实现它的样子？

Answer 1

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

如果你想保持重叠，你需要通过添加自己的帮助类float: left来覆盖Bootstrap的float: none。

在自定义CSS文件中，您可以执行以下操作：

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

并将该类添加到正确的HTML元素：

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

Answer 2

使用position: absolute定位下拉选项的更简洁方法。不需要复杂的花车或其他任何东西。

＆＃13;

$('input').on('keyup', function() {
    $('.result').addClass('result-visible');
});

$(document).on('click', function() {
    $('.result').removeClass('result-visible');  
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

引导类col-md-12也设置了float: left，这有助于从父级中溢出子元素。由于您的搜索栏具有固定的高度，因此您需要将float-left添加到.result_optins类，并且它的行为方式相同。

这是一个pen，可以更好地了解正在发生的事情。

bootstrap col-md-12与宽度100％在显示/隐藏div时表现不同

3 个答案: