Html 导航栏中的引导3配置文件映像

如何在不扭曲导航栏的情况下，将配置文件图像（见图）设置为25/30px

这就是我现在拥有的：

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <img src="http://placehold.it/18x18" class="profile-image img-circle"> Username <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#"><i class="fa fa-cog"></i> Account</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a></li>
    </ul>
</li>

结果是：

但是，如果我将图像的大小更改为30x30，就会发生这种情况，如何防止导航栏失真：

我试图清除图像上的空白和填充物，但没有效果

---

更新：这是当前代码的一部分。

查看JSFIDLE后，我发现问题是由您使用的图像高度而不是填充引起的

//write you  script
$(document).ready(function(){
    $(".dropdown").mouseover(function(){
        $(".dropdown-menu").show();
    })
    $(".dropdown").mouseout(function(){
        $(".dropdown-menu").hide();
    });
});

为图像指定一个类，使其向左浮动，然后使用position:relative调整位置

<li class="dropdown">
    <a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown">
        <img src="http://placehold.it/30x30" class="img-circle special-img"> Test <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#"><i class="fa fa-cog"></i> Account</a></li>
                    <li class="divider"></li>
                    <li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a></li>
                </ul>
</li>

---

我的小提琴

你基本上是按照Kooki3所说的做的，引导样式表中有更多的特殊性，所以只需将你的

.profile-image

更改为

.navbar-nav>li>a.profile-image

像这样编辑你的小提琴，我觉得导航非常完美：

.navbar-nav>li>a.profile-image {
    padding-top: 10px;
    padding-bottom: 10px;
}

---

嗯。。。下拉菜单没有问题，问题在于图像，下拉菜单正常工作。什么事件？我的朋友我看到你使用自定义图标。您可以检查css中的图标，并确保它适用于所有大小？在这种情况下，它不是图标，而是图像（当前是占位符），但稍后它将是用户配置文件图像。所以我看不出你的建议会有什么帮助（对不起）。我找错地方了。但是为什么你不想使用CSS图标呢？它将确保您在所有屏幕大小上都有正确大小的图标。@Megakuh我正在使用css图标（字体很棒），但在这个例子中，在布局的这个位置，我想显示用户的配置文件图像/头像，因此据我所知，我无法使用css图标显示用户的实际配置文件图像。您能解释一下它是如何扭曲导航栏的吗？也许可以提供一些视觉指南，让它看起来更准确？那太好了。我猜你想在图像和其余元素之间添加一些额外的填充？我将profile image类移动到锚点，并将填充设置为0，但没有任何效果：（你有我可以用来检查的页面吗？仅仅通过查看图片无法想象/再现问题。谢谢你我对你的答案投了赞成票，但接受了@jme11的答案。原因很简单，对我来说，解决方案似乎更优雅。但你的解决方案仍然有效：）第一次看的时候还可以，但是现在悬停不再正确：对不起，输入错误。应该是10px顶部和10px底部。更新了我的答案。

.navbar-nav>li>a.profile-image {
    padding-top: 10px;
    padding-bottom: 10px;
}