我无法复制以下导航栏，尝试了一切。 [引导 3 导航]

Question

过去 4 小时我一直在研究这个问题。尝试了一切，但我无法复制此导航栏。

这个导航栏有这样的HTML；

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        @for($i = 0; $i <= 2; $i++) <!-- below loops 3 times for testing purposes -->
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                      //Styling goes here.
                </a>

                <ul class="dropdown-menu">
                    <li><a href="#">Sublink</a></li>
                </ul>
            </li>
        @endfor
    </ul>
</div><!-- /.nav-collapse -->

它是这样工作的：

1. li 标签本身有透明的圆形背景。 （例如 <li class="blue"> 有蓝色圆圈）
2. 透明的房子图标被放置在这些圆形背景上。 （它们需要以圆圈为中心，可能需要一些边距黑客？）
3. Konut是菜单名，意思是House（类型无所谓，我试过用h4和span）
4. 下面的数字是总列表的数量。 （基本上是一个跨度）

我重写了我的导航栏 10 次。尝试过块级图像 div、内联块 div、margin hacks、相对定位、绝对定位、使用框模型......我真的要扯掉我的头发了。

The live version can be found here（我不太了解他们的造型）

谁能给我一个 JsFiddle 示例或告诉我应该做什么？还是我的 HTML 标记有问题？

谢谢。

附言。如果重要的话，我会使用 Bootstrap 3。

Answer 1

在没有看到您的代码的情况下，您应该这样做：

您需要制作正确的精灵表。请注意原始元素中元素的距离如何与导航栏的高度一样。这不是强制性的，但它可以解决可能出现的垂直定位/裁剪问题。

就像你说的：

• li 标签本身有透明的圆形背景。 background-position derived from class
• 透明的房子图标被放置在这些圆形背景上。 background-position + padding
• Konut 是一个菜单名称，意思是 House nothing special here
• 下面的数字是总列表的数量。 also nothing special here, just be careful to position it properly

这只是您需要了解的事项列表。一旦我看到你到目前为止做了什么，我会扩展我的答案。

当然，如果您不想使用 spritesheet，而是使用单独的图像，那也可以。唯一的区别是您将通过它们的 URL 指定背景图片，而您提供给我们的网站通过它们的 spritesheet 位置指定它们。