将图标添加到 Bootstrap 下拉菜单
Posted
技术标签:
【中文标题】将图标添加到 Bootstrap 下拉菜单【英文标题】:Adding icons to a Bootstrap dropdown 【发布时间】:2013-04-03 03:54:54 【问题描述】:我想在 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>
但是,图标不合适:
我尝试使用this answer 中的解决方案,但它似乎不起作用。有人可以提供解决方案并解释它为什么/如何工作吗?
Demo
谢谢!
【问题讨论】:
【参考方案1】:将图标放在锚标签内:
<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"/>
【讨论】:
Twitter bootstrap 专门使用了 i 标签,因为它是一个内联元素。这样,您可以在和 标记中使用它,并且它在语义上仍然是正确的。这是我肯定会使用的方法。
@N1ck,但为什么不能这样工作(firefox):jsfiddle.net/ywkLt/40?任何线索如何解决它?谢谢 @BradBarrow 它在语法上可能是正确的,但我认为使用 i 表示图标在语义上并不准确:) 我建议将以下 css 添加到您的站点,以便图标对齐大致相同。如果你有遮罩和分层,它也不会起作用。.dropdown-item i min-width: 20px; text-align: center;
【参考方案2】:
用于定位
定义你的.dropdown-menu li
position relative
和我定义position absolute
像这样
.dropdown-menu a
white-space:normal;
.dropdown-menu > liposition:relative;
.dropdown-menu > li > iposition:absolute;left:0;top:3px;
Live Demo
【讨论】:
使用这种方法,点击图标与点击链接的效果不同。 @N1ck,我们中的一些人可能想要这种行为。【参考方案3】:将图标放在 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>
示例:http://jsfiddle.net/9ce3P/
【讨论】:
【参考方案4】:<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>
【讨论】:
以上是关于将图标添加到 Bootstrap 下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章
如何在活动的 Bootstrap 4 下拉菜单中旋转箭头图标?