如何使用html bootstrap实现带有图标的下拉列表

Question

我是bootstrap的新手，但是请你就如何实现这种类型的下拉菜单提出想法？谢谢

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 for the down down

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

关键是glyphicons是绝对定位的，即使它们被“包含”在标记内部，默认情况下定位也相对于整个菜单。通过将.icon类添加到包含图标的每个菜单锚点，它允许您相对于该锚点进行定位，并填充锚文本以使图标具有正确显示的空间。