将图标添加到引导下拉菜单项 [英] Adding icons to bootstrap drop down menu items

问题描述

我正在尝试添加一些图标到一个引导下拉菜单（参见下面的小提琴）
，你可以看到图标被添加，但它推送男人你的项目到右边那个菜单项没有对齐与其他项目不一样。

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 ?

js fiddle

<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>

推荐答案

这将工作。不幸的是，您似乎需要在背景图片上使用！important ，通常最好尽量避免。注意，某些旧版浏览器不支持nth-of-type。

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小提琴： http://jsfiddle.net/syVk8/

编辑：好的，经过一点点澄清，结果是你不想让文字翻转。这是一个类似的例子，左边没有填充，一个叫做'ok'的类可以应用到不同的菜单项来添加复选框（或者你的图标可能是）。

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小提琴： http://jsfiddle.net/syVk8/2/

这篇关于将图标添加到引导下拉菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！