Question

当我点击下拉按钮时，其下的其他内容随之向下移动。我试过z-index，position：relative; 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>

当它点击它时会转到display:block并且位置始终是

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

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

Bootstrap Dropdown将其他div降低

3 个答案: