這是什麼導致這種力左引導下拉的菜單格式？

Question

我有以下的HTML代碼：

<div style="text-align: center;">    
     <h2 class="bpcenter" style="color: white;">ONE</h2>   

    <div class="dropdown"> 
    <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> 
    Settings 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
    </ul> 
</div> 
</div>   

其中，現在，是給我這樣的輸出：

我使用的是標準的引導3.3.2 CSS/JS文件和我的天堂修改了.dropdown或.dropdown>menu的css代碼中的任何內容。

該按鈕居中，但<ul>及其後<li>是合理的左。我不知道爲什麼。

Answer 1

問題是，下拉div擴大到100％寬度，內部菜單絕對相對它定位並有left: 0。

您需要設置按鈕inline-block在這種情況下，菜單將正確定位：

<div class="dropdown drop-button"> 
    <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> 
     Settings 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
     <li role="presentation"> 
      <a role="menuitem" tabindex="-1" href="#">Action</a> 
     </li> 
     <li role="presentation"> 
      <a role="menuitem" tabindex="-1" href="#">Another action</a> 
     </li> 
     <li role="presentation"> 
      <a role="menuitem" tabindex="-1" href="#">Something else here</a> 
     </li> 
     <li role="presentation"> 
      <a role="menuitem" tabindex="-1" href="#">Separated link</a> 
     </li> 
    </ul> 
</div> 

CSS：

.drop-button { 
    display: inline-block; 
} 

演示：http://plnkr.co/edit/07w4pjNVnjd7p71fGOCT?p=preview