我正在尝试在bootstrap下拉菜单中添加一些图标(请参阅下面的小提琴) 正如你所看到的那样,图标会被添加,但它会向右推动你的项目,并且该菜单项不再与其他项目对齐。
这样做的恰当方法是什么?
<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>
答案 0 :(得分:17)
以下是我在Bootstrap 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
。
答案 1 :(得分:0)
这会奏效。不幸的是,您似乎需要在背景图像上使用!important
,这通常是最好避免的。注意,某些旧版浏览器不支持nth-of-type。
@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;
}