Boostrap下拉移动其他divs

Question

当我点击下拉按钮时，其下的其他内容随着它下移。我试过z-index，位置：相对; position：static我怎样才能防止这种情况发生。点击下拉菜单后，我不希望任何内容移动。有任何想法吗？

 <div class='whiteBox'> 
      <div class='newProducts'></div> 
      <div id="compareInfo"> 
       <div id="comparisionTitle">Title</div> 
       <div class="divStyle"> 
        <div class="btn-group"> 
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="chooseItem">Drop down Box<span class="caret"></span></button> 
        <ul class="dropdown-menu"> 
         <li><a id="item1DropDown" href="#">item1</a></li> 
         <li><a href="#" id="action-2">item2</a></li> 
         <li><a href="#" id="action-3">item3</a></li> 
        </ul> 
        </div> 
        <!-- /btn-group --> 
       </div> 
       <div id="compareBoxes"> 
        <div id="Label">Text under Dropdown</div> 
        <button class= 
        "btn btn-compare" id="compareButton" type= 
        "submit">Submit</button> 
       </div> 
      </div> 
     </div> 

#divStyle{ 
    list-style:none; 
position:relative; 
float:left; 
     right:240px; 
} 

Answer 1

您必须设置DIV你想拥有这样一个下拉菜单：

list-style:none; 
position:relative; 
float:left; 

然后设置自己的位置了。

Here是一个很好的可定制教程。

Answer 2

您似乎错过了您的div上的dropdown类，以及下拉列表中的li和a标签的角色字段。尝试向这些添加role="presentation"。

像：

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle"...>...</button> 
    <ul class="dropdown-menu"> 
     <li role="presentation"><a role="presentation ...>item1</a></li> 
    </ul> 
</div> 

Answer 3

这是一个典型的bootstrap navbar dropdown（在机制的文档，你可以看到它在原有的导航栏工作）

<li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     <li class="divider"></li> 
     <li><a href="#">One more separated link</a></li> 
     </ul> 
    </li> 

的简化版本，它的点击时toogles display:block并且位置始终为

position: absolute; 
top: 100%; 
left: 0; 
z-index: 1000; 

由于bootstrap高度依赖于它的标记，因此您需要严格参考文档，因此我建议您查看代码以查看缺少的内容。