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

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，边缘黑客，相对定位，绝对定位，使用盒子模型......我真的要撕开我的头发。

The live version can be found here（我从他们的造型中无法理解）

任何人都可以给我一个JsFiddle示例或者告诉我应该做什么吗？或者我的HTML标记有问题吗？

谢谢。

聚苯乙烯。我使用Bootstrap 3，如果重要的话。

Answer 1

如果没有看到您的代码，请执行以下操作：

你需要制作一个正确的spritesheet。请注意原始元素中元素的距离就像导航栏的高度一样。它不是强制性的，但它修复了可能出现的垂直定位/裁剪问题。

就像你说的那样：

• li tag本身具有透明的圆形背景。 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位置指定它们。