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

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

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