Bootstrap下拉列表上的问题悬停突出显示

Question

我正在尝试将图片/图标添加到bootstrap下拉列表选项HERE 它以某种方式工作，但正如您从演示和后续图像中看到的那样，悬停功能不会对整个li区域做出反应（突出显示）！

请告诉我如何修复li元素的所有宽度？

这也是我的代码 CSS：

li.one {
background-image: url("http://i1275.photobucket.com/albums/y443/Behseini/lister_zps15367983.png") !important;
background-repeat: no-repeat;
background-position: 5px 7px;
width: 60px;
height: 25px;
}

和HTML

<div class="btn-group">
<button class="btn span2">Select</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
    <li class="one"><a href="#">Item 1</a></li>
    <li class="two"><a href="#">Item 2</a></li>
    <li class="three"><a href="#">Item 3</a></li>
    <li class="four"><a href="#">Item 4</a></li>
    <li class="five"><a href="#">Item 5</a></li>
    <li class="six"><a href="#">Item 6</a></li>
    <li class="divider"></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>

由于

Answer 1

使用列表项背景作为图标是一个坏主意，因为它使文本上的放置非常棘手（如您所见）。

我绝对鼓励你为图标添加一个新的独立元素。 By convention, icons are added in bootstrap in format <i class="icon-[name]"></i>。如果你想要自定义图标，你当然可以定义自己的类和相关的CSS样式。

这是一个简单的例子：

HTML：

<li class="one"><a href="#"><i class="icon-custom-1"></i>Item 1</a>

CSS：

.icon-custom-1 {
    background-image: url("http://i1275.photobucket.com/albums/y443/Behseini/lister_zps15367983.png") !important;
    background-repeat: no-repeat;
    background-position: 0px 7px;
    width: 60px;
    height: 25px;
}

在相关的说明中，您可以通配所有icon- *样式，这样您就不必在任何地方复制和粘贴相同的内容：

div[class*='icon-custom-'] {
    /* Insert common CSS styles here */
}

请注意，我正在使用额外的custom-将此自定义图标格式与bootstrap本身提供的图标分开。

快乐自举！

Answer 2

如果您只是想在悬停时将突出显示向右延伸，我建议删除宽度：60px;来自你的每个人，li.two等

也许在你的选择器上增加一些额外的余量以减少重叠。

总的来说，我同意jsalonen你应该考虑使用Bootstrap中的内置图标代码。