1

我正在尝试将图像/图标添加到引导下拉 btn 列表选项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>

谢谢

4

2 回答 2

1

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

我肯定会鼓励您为图标添加一个新的、单独的元素。按照惯例，图标以 format 的形式添加到 bootstrap 中 <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 */
}

请注意，我使用 extracustom-来将此自定义图标格式与引导程序本机提供的图标分开。

快乐的引导！

于 2013-07-12T19:08:38.407 回答
1

如果您只是想让高亮在悬停时向右延伸，我建议您删除 width: 60px; 来自您的每个 li.one、li.two 等。

也许在你的 li a 选择器上添加一些额外的边距以减少重叠。

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

于 2013-07-12T19:16:59.687 回答