Html 将图标添加到 Bootstrap 下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15940566/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding icons to a Bootstrap dropdown
提问by wrongusername
I want to add some icons to links in a Bootstrap dropdown, using code like this:
我想使用如下代码在 Bootstrap 下拉菜单中的链接中添加一些图标：
<ul>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Some Dropdown<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><i class="icon-arrow-up"></i><a href="#">Up</a></li>
<li><i class="icon-arrow-down"></i><a href="#">Down</a></li>
<li><i class="icon-arrow-left"></i><a href="#">Left</a></li>
<li><i class="icon-arrow-right"></i><a href="#">Right</a></li>
</ul>
</li>
</ul>
However, the icons are out of place:
但是，图标不合适：
I tried using the solution in this answer, but it doesn't seem to work. Can somebody provide a solution and explain why/how it works?
我尝试使用此答案中的解决方案，但似乎不起作用。有人可以提供解决方案并解释为什么/如何工作吗？
Thanks!
谢谢！
回答by N1ck
Put the icons inside the anchor tags:
将图标放在锚标签内：
<ul>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Some Dropdown<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-arrow-up"></i> Up</a></li>
<li><a href="#"><i class="icon-arrow-down"></i> Down</a></li>
<li><a href="#"><i class="icon-arrow-left"></i> Left</a></li>
<li><a href="#"><i class="icon-arrow-right"></i> Right</a></li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>回答by Rohit Azad
Used to Position
用于定位
Define your.dropdown-menu liposition relativeandi define position absolute
定义你.dropdown-menu liposition relative和我定义position absolute
as like this
像这样
.dropdown-menu a {
white-space:normal;
}
.dropdown-menu > li{position:relative;}
.dropdown-menu > li > i{position:absolute;left:0;top:3px;}
回答by Zymotik
Put the icons inside the anchor tags for Bootstrap v3 (with icons from http://www.FontAwesome.com):
将图标放在 Bootstrap v3 的锚标签内（使用来自http://www.FontAwesome.com 的图标）：
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">A Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-arrow-up"></i> Up</a></li>
<li><a href="#"><i class="fa fa-arrow-down"></i> Down</a></li>
<li><a href="#"><i class="fa fa-arrow-left"></i> Left</a></li>
<li><a href="#"><i class="fa fa-arrow-right"></i> Right</a></li>
</ul>
</li>
</ul>
Example: http://jsfiddle.net/9ce3P/
回答by Mohammad Dayyan
<ul class="dropdown-menu" role="menu">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="javascript:void(0)">
<span class="pull-right">Edit</span>
<span class="glyphicon glyphicon-edit pull-left"></span>
<span class="clearfix"></span>
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="javascript:void(0)">
<span class="pull-right">Delete</span>
<span class="glyphicon glyphicon-remove pull-left"></span>
<span class="clearfix"></span>
</a>
</li>
</ul>
