如何將Twitterbootstrap中的下拉框居中？

Question

我很難嘗試將組中的按鈕切換到中心位置。該組正確居中，但下拉列表繼續在左上角。

這是example。

有人可以幫忙嗎？

在此先感謝！

Answer 1

也許你正在尋找類似的東西：Live demo (jsfiddle)

.centered { 
    text-align: center; 
} 
.centered .dropdown { 
    display: inline-block; 
    min-width: 500px; /* Needs to be big enough for the menu to be centered in it */ 
} 
.centered .dropdown.open .dropdown-menu { 
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    width: 200px; 
} 

<div class="centered"> 
    <div class="dropdown"> 
     <a class="dropdown-toggle btn" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#"> 
     Dropdown 
     <b class="caret"></b> 
     </a> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
      <li><a href="#">a</a></li> 
      <li><a href="#">b</a></li> 
      <li><a href="#">c</a></li> 
     </ul> 
    </div> 
</div> 

編輯完成CSS

Answer 2

如果要居中你div.dropdown內的另一個div做它像這樣：

#dropdown1 { 
    width: 183px; 
    margin: 0 auto; 
}​ 

它的缺點是你需要知道你正在居中的元素的確切寬度（這就是我使用id作爲選擇器的原因;當然你需要先琢磨它）。

瞭解它如何在您的updated fiddle上運行。