html - bootstrap col-md-12 vs. width 100% 在显示/隐藏 div 时表现不同

Question

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

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

<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 ，这就是它看起来不同的原因。

如果你想保持重叠，你需要覆盖 Bootstrap 的 float: left通过添加你自己的辅助类，使用 float: none .

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

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

并将该类添加到适当的 HTML 元素中:

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