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高度依賴於它的標記，因此您需要嚴格參考文檔，因此我建議您查看代碼以查看缺少的內容。