向引导程序添加图标下拉菜单项 [英] Adding icons to bootstrap drop down menu items
问题描述
我试图添加一些图标到一个引导下拉菜单(见下面的小提琴)
,你可以看到图标被添加,但它将men u项向右推,该菜单项不对齐
https://i.stack.imgur.com/UxBPG.pngalt =enter image description here>
< div class = -left>
< div class =pull-right>
< div class =btn-group>
< a class =btn btn-mini dropdown-toggledata-toggle =dropdownhref =#>
< span>操作< / 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 =#>第2项< / a>< / li>
< li>< a href =#>第3项< / a>< / li>
< li class =divider>< / li>
< li>< a href =#>第4项< / a>< / li>
< li>< a href =#>项目5< / a>< / li>
< / ul>
< / div>
< / div>
这将工作。不幸的是,你似乎需要在背景图像上使用!important
,这通常最好尽量避免。注意,一些旧版本浏览器不支持nth-of-type。
@import url('http:// twitter。 github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top:10px;
}
/ *第一个菜单项* /
。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;
}
/ *第二个菜单项* /
。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 Fiddle: http://jsfiddle.net/syVk8/
编辑:好吧,经过一番澄清,不想让文本转换。这里有一个类似的例子,左边没有padding和一个叫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;
}
JS Fiddle: http://jsfiddle.net/syVk8/2/
I am trying to add some icons to a bootstrap dropdown menu ( see fiddle below ) as you can see the icon gets added, but it pushes the men u item to the right and that menu item is not aligned with the other items anymore.
What is the appropriate way to do this ?
<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>
This will work. Unfortunately it seems that you need to use !important
on the background-image which is usually best to try to avoid. Note, nth-of-type is not supported in some older browsers.
@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 Fiddle: http://jsfiddle.net/syVk8/
EDIT: Ok, after a little clarification it turns out you don't want the text shifting over at all. Here is a similar example with no padding on the left and a class called 'ok' that you can apply to different menu items to add the checkbox (or whatever your icon might be):
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;
}
JS Fiddle: http://jsfiddle.net/syVk8/2/
这篇关于向引导程序添加图标下拉菜单项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!