如何使用html引導實現帶圖標的下拉菜單

Question

我是自舉新手，但您能否介紹一下如何實現這種類型的下拉菜單？謝謝

Dropdown

Answer 1

標記這樣一個下拉

<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是絕對的定位，即使它們被「包含」在標記內，定位相對於整個菜單默認。通過將.icon類添加到包含圖標的每個菜單定位點，它可以讓您相對於該定位點進行定位，並且還可以添加定位文本，以便該圖標有足夠的空間可以正確顯示。