將圖標添加到引導程序下拉菜單項

Question

我試圖將一些圖標添加到引導程序下拉菜單中（請參見下面的提琴） 正如您可以看到圖標被添加，但它會將這些圖標推到右側，菜單項目不再與其他項目對齊。

什麼是適當的方法來做到這一點？

js fiddle

<div class="pull-left"> 
<div class="pull-right"> 
    <div class="btn-group">     
      <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#"> 
       <span>Actions</span> 
       <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#"><i class="icon-ok"></i>Item 1</a></li> 
       <li><a href="#">Item 2</a></li> 
       <li><a href="#">Item 3</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Item 4</a></li> 
       <li><a href="#">Item 5</a></li> 

      </ul> 
     </div> 
</div> 

Answer 1

這將工作。不幸的是，您似乎需要在背景圖片上使用!important，這通常是最好避免的。請注意，某些較舊的瀏覽器不支持該類型。

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

.container { 
    margin-top: 10px; 
} 

/* First Menu Item */ 
.dropdown-menu li:nth-of-type(1) { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat; 
    background-size: 16px 16px; 
    background-position: 3px 5px; 
    padding-left: 5px; 
} 

/* Second Menu Item */ 
.dropdown-menu li:nth-of-type(2) { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat; 
    background-size: 16px 16px; 
    background-position: 3px 5px; 
    padding-left: 5px; 
} 

JS小提琴：http://jsfiddle.net/syVk8/

編輯：好吧，一點點澄清後，原來你不想文本都移了過來。這是在左側沒有空白和一個叫「OK」類類似的例子，你可以應用到不同的菜單項中添加複選框（或任何你的圖標可能是）：

li.ok { 
    background-image: url("http://files.softicons.com/download/application-icons/32x32-free-design-icons-by-aha-soft/png/32/Color%20test.png") !important; 
    background-repeat: no-repeat; 
    background-size: 16px 16px; 
    background-position: 3px 5px; 
} 

JS小提琴：http://jsfiddle.net/syVk8/2/

Answer 2

以下是我在引導3.x中這樣做：

標記：

<ul class="dropdown-menu"> 
    <li><a href="#" class="icon"><span 
     class="glyphicon glyphicon-user"></span>User Profile</a></li> 
    <li><a href="#">Log Out</a></li> 
</ul> 

CSS：

.dropdown-menu a.icon { 
    position: relative; 
    padding-left: 40px; 
} 
.dropdown-menu a.icon .glyphicon { 
    top: 6px; 
    left: 10px; 
    font-size: 18px; 
} 

的關鍵是glyphicons是絕對的定位，即使他們是「包含」在標記的<a>內，定位是相對於由整個菜單默認。通過將.icon類添加到包含圖標的每個菜單定位點中，它允許您相對於該定位點進行定位，並且還會填充定位文本，以便該圖標有足夠的空間可以正確顯示。正如您在上面看到的，任何不包含.icon類或glyphicon的菜單項通常都會顯示爲文本鏈接。

如果原始問題的意圖是始終讓文本垂直對齊圖標，只需將填充移至.dropdown-menu a即可。