导航栏中的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;
}

我的小提琴在这里

Answer 2

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

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

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