将图像添加到Bootstrap Navbar链接

Question

我想在我的bootstrap导航栏中的链接旁边添加一个小头像，如下所示：

我正在尝试将我的图片添加到链接的<a>标记内，但这会使链接与其他链接不一致，因为图像比链接文本更高。

这是我的HTML

<li><a href="link">
    <img class="hidden-xs" src="img">
    MIKE
    </a>
</li>

是否有一种正确的方法可以轻松地将图像添加到bootstrap导航条中，以便所有链接仍然保持一致？

Answer 1

这里的@press'改变了线条高度。你可以明显地在填充等方面调整..给你的喜欢http://jsfiddle.net/c6f1ecrv/4/

.navbar-nav li a {
    line-height:3em;
    padding:5px 10px;
}

Answer 2

感谢那些指出我需要改变行高的人。然而，仅改变行高的问题在于这会弄乱引导导航栏的默认高度设置。所以我用较少的计算进行了一些计算，以使所有的风格都很好地运用。：

@nav-avatar-height: 40px;
@nav-link-line-height: @nav-avatar-height;
@nav-link-padding-vertical: calc((@navbar-height - @nav-avatar-height) / 2);

// Only apply extra spacing when not collapsed into dropdown
@media (min-width: @screen-xs-max) {
    .nav > li > a {
        font-size: 1.1em;
        line-height: @nav-link-line-height;
        padding-top: @nav-link-padding-vertical;
        padding-bottom: @nav-link-padding-vertical;
    }

    .nav > li > a > img {
        height: @nav-avatar-height;
        border-radius: 50%;
        border: 1px solid @gray-light;
    }
}