在Bootstrap导航栏链接中添加图片

Question

我想在我的Bootstrap导航栏中像这样在链接旁添加一个小头像： 我试图将我的图像放在链接的标签内，但是由于图像比链接的文本高，所以这会使链接与其他链接不对齐。

以下是我的HTML代码：

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

有没有一种合适的方法可以轻松地将图像添加到Bootstrap导航栏中，以便所有链接仍保持在同一行中？

- rfj001

---

尝试在图像中使用响应式类。 - Coding Enthusiast

那并没有帮助任何事情。它会将图像变成一个块，将链接推到下一行。 - rfj001

好的，我认为这可能是一个重复的问题，如果我错了请纠正我：https://dev59.com/nGkw5IYBdhLWcg3wbqGZ - Coding Enthusiast

我认为这个问题是关于添加品牌图像，而不是将图像作为图标添加到链接中。无论如何，那个问题中的解决方案对我并不起作用。 - rfj001

@rfj001 看一下下面Jake Taylor的答案，它会帮你解决的。 - Wild Beard

Answer 1

这是@press的小样，行高已经改变。您可以根据自己的喜好进行填充等调整 http://jsfiddle.net/c6f1ecrv/4/

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

- Jake Taylor

Answer 2

感谢那些指出我需要改变行高的人。然而，仅仅改变行高的问题在于这会破坏Bootstrap导航栏的默认高度设置。因此，我使用了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;
    }
}

- rfj001

---

我从未说过“只是”改变行高。事实上，我说过您可以根据自己的喜好调整代码的其余部分。您确实需要从更改行高开始，才能获得最初想要的结果。所以，“我们中的某些人”（只有我）指出您需要更改行高时，“欢迎您”。 :) - Jake Taylor