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

前端之家收集整理的这篇文章主要介绍了html – bootstrap col-md-12与宽度100%在显示/隐藏div时表现不同前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试实现类似于自动完成的下拉菜单.我注意到当我使用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,如何在第二种情况下(重叠)实现它的样子?

解决方法

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

如果你想保持重叠,你需要覆盖Bootstrap的float:left,添加一个你自己的helper类,float:none.

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

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

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

<div class="result_optins col-md-12 h-fn"> ... </div>
原文链接:https://www.f2er.com/html/223946.html

猜你在找的HTML相关文章