关于引导下拉列表的问题悬停Higlight

我想添加图像/图标到引导下拉列表选项HERE 它以某种方式工作，但您可以从演示和后续图像看到悬停功能不会反应（突出显示）整个黎区！关于引导下拉列表的问题悬停Higlight

enter image description here

能否请你让我知道如何解决这个highlits 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>

感谢

来源

2013-07-12 Mona Coder

使用列表项的背景为一个图标是一个坏主意因为它使文本铺设非常棘手（正如你所经历的那样）。

我一定会鼓励你为图标添加一个新的独立元素。 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-将自定义图标格式与自举提供的图标区分开来。

快乐bootstrapping！

来源

2013-07-12 19:08:38 jsalonen

小提琴在这里完整代码：http://jsfiddle.net/AvXPU/18/ – jsalonen

嗨jsalonen，感谢它现在正在工作如何对齐李文本和.icon-1类？正如你从演示中看到的那样，它们不是水平对齐的。你能让我知道如何解决它吗？ –

使用上面的@jsalonen提琴，您可以将背景位置更改为： background-position：0px 0px; 但是你可能需要玩你的身高以及你似乎正在使用精灵。 – BJack

如果你只是想突出显示延伸到右侧时，我会建议删除宽度：60px;从你的每一个li.one，li.two等

也许增加一些额外的利润你的李选择器以及减少重叠。

总的来说，我会同意jsalonen你应该利用Bootstrap中的内置图标代码进行研究。

来源

2013-07-12 19:16:59 BJack

关于引导下拉列表的问题悬停Higlight

回答

相关问题