Boostrap Dropdown将其他div下移

Question

当我单击下拉按钮时，它下面的其他内容也会随之下移。我已经尝试了z索引，位置:相对；位置:静态我如何才能防止这种情况发生。当下拉菜单被点击时，我不希望任何东西移动。有什么想法吗？

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

当它被点击时，它会切换到display:block，位置总是

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

由于bootstrap高度依赖于它的标记，因此您需要严格参考文档，所以我建议您检查一下代码，看看缺少了什么。