导航栏中的Bootstrap 3配置文件图像

Question

如何在不扭曲导航栏的情况下获取配置文件图像（参见图片）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，则会发生这种情况，如何防止导航栏失真：

我尝试清除图像上的边距和填充但没有效果。

更新：这是当前代码的JSFiddle。

Answer 1

在查看JSFiddle之后，我发现问题是由你使用的图像的高度而不是填充引起的。

给图像一个类，让它向左浮动，然后使用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>

-

.special-img 
{
    position: relative;
    top: -5px;
    float: left;
    left: -5px;
}

我的小提琴 here

Answer 2

你完全按照Kooki3所说的那样，在Bootstrap样式表中有更多特异性，所以只需将.profile-image更改为.navbar-nav>li>a.profile-image

像这样编辑你的小提琴，导航看起来很完美：

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

Answer 3

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