在居中圖像上使用引導程序下拉列表

我想在居中圖像上使用引導程序下拉列表，但我無法獲得居中顯示的下拉列表。在居中圖像上使用引導程序下拉列表

<div class="row"> 
    <div class="col-md-12 profile-picture text-center"> 
     <div class="dropdown col-md-3"> 
      <img src="http://i.imgur.com/9qfJGrz.jpg" alt="" class="profile-photo img-thumbnail" data-toggle="dropdown" /> 
      <ul class="dropdown-menu" role="menu" aria-labelledby="Change Settings"> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Upload new picture</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Remove</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

正如你可以看到下拉菜單被左對齊，有沒有得到它的圖像下方居中的方法嗎？它在col-md-3，所以嘗試調整屏幕的大小。

來源

2014-04-24 Adam

將顯示內嵌塊添加到您的下拉列表中。

.dropdown 
{ 
    display: inline-block; 
}

這裏有一個fiddle.

來源

2014-04-24 13:06:31 MiniRagnarok

是這樣的！另外1個修正：將下拉寬度更改爲170px –

@DanielCheung是的，我同意。如果下拉菜單的寬度與圖像相同，則效果會更好。由於Adam的下拉菜單已經小於170px，因此我會讓他決定。（但我同意你的看法，它更好）:) – MiniRagnarok

這是比我更清潔的解決方案（當你看不到引導樣式時，很容易忽略這樣的事情！），+1。 –

查看更新fiddle

這將是一個解決方案，只要響應爲你申報菜單的寬度，將工作：

.profile-photo { 
    width: 170px; 
    height: 170px; 
    margin: 0 auto; 
    display: block; 
} 

.dropdown-menu { 
    margin-left: -85px; 
    width: 170px; 
    left: 50%; 
    position: absolute;  
}

我刪除了你的col-md-3因爲你只是在定位菜單用這種方法在col-md-12的中途。

來源

2014-04-24 12:51:57

與唯一的問題是它下面的任何內容被下推，而不是被下拉下：http://jsfiddle.net/Df9Ug/ – Adam

沒問題，只是使用'position：absolute;'see here：http://jsfiddle.net/Df9Ug/1/ @Adam –

position: absolute,left:0px和float:left是原因。

修復：

.profile-picture .dropdown-menu { 
    position: relative; 
    clear: both; 
    float: none; 
}

寬度將堅持列:)

的寬度。如果你不喜歡的是，使用這些或刪除列設置：

width: 170px; 
margin: 0 auto;

來源

2014-04-24 12:53:39

下拉菜單不是個人資料照片的孩子。 – MiniRagnarok

謝謝，編輯！ –

在居中圖像上使用引導程序下拉列表

回答

相關問題