将图像添加到引导导航栏链接

Question

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

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

这是我的 HTML

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

是否有适当的方法可以轻松地将图像添加到引导导航栏，以便所有链接仍然保持一致？

Answer 1

这是 @press 的小提琴，改变了行高。您显然可以根据自己的喜好调整填充等。http://jsfiddle.net/c6f1ecrv/4/

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

Answer 2

感谢那些指出我需要更改行高的人。但是，仅更改行高的问题在于，这会破坏引导导航栏的默认高度设置。所以我用less做了一些计算，让所有的风格都很好玩。：

@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;
    }
}