Bootstrap下拉菜單左側打開

Question

我有一個從bootstrap下拉菜單，我在頁面右側對齊，我想打開左側。我試圖把左拉，但它所做的只是將我的按鈕移動到div的左側部分。這是爲什麼？

<button class="btn btn-link dropdown pull-left account-menu-btn"> 
       <a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false"> 
        <img src="http://placehold.it/40X40" class="img-circle"> 
       </a> 
       <ul class="dropdown-menu" role="menu"> 
        <li> 
         <a href="#"> 
          Create 
         </a> 
        </li> 
        <li class="divider"> 
        </li> 
        <li> 
         <a href="#"> 
          Settings 
         </a> 
        </li> 
        <li> 
         <a href="#"> 
          Log out 
         </a> 
        </li> 
       </ul> 
      </button> 

，這裏是我的帳戶菜單BTN風格：

.account-menu-btn { 
    float: right; 
} 

Answer 1

的問題是，在下拉菜單有一個位置絕對和按鈕本身具有的相對位置，這使得下拉出現內按鈕

所以你必須給它position:static;以清除按鈕的相對位置並應用position:relative;你包裝的寬度div

.dropdown, .dropup{ 
 
    position:static!important; 
 
} 
 
.wrapper{ 
 
    position:relative; 
 
    width:80%; 
 
} 
 
ul.dropdown-menu{ 
 
    right:auto!important; 
 
    left:0!important; 
 
    top:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="wrapper container"> 
 
<button class="btn btn-link dropdown pull-right account-menu-btn"> 
 
       <a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false"> 
 
        <img src="http://placehold.it/40x40" class="img-circle"> 
 
       </a> 
 
       <ul class="dropdown-menu pull-left" role="menu"> 
 
        <li> 
 
         <a href="#"> 
 
          Create 
 
         </a> 
 
        </li> 
 
        <li class="divider"> 
 
        </li> 
 
        <li> 
 
         <a href="#"> 
 
          Settings 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a href="#"> 
 
          Log out 
 
         </a> 
 
        </li> 
 
       </ul> 
 
      </button> 
 
      
 
</div>