将图像添加到 Bootstrap 个导航栏链接

Question

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

我正在尝试将我的图像添加到 link 的 <a> 标签内，但这会使 link 与其他 link 不一致, 因为图像比 links.

的文本高

这是我的 HTML

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

有没有合适的方法可以轻松地将图像添加到 bootstrap nav-bars 以便所有 link 仍然保持一致？

Answer 1

这里是@press' fiddle，行高已更改。您显然可以根据自己的喜好调整填充等 http://jsfiddle.net/c6f1ecrv/4/

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

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

将图像添加到 Bootstrap 个导航栏链接

Add image to Bootstrap Navbar Links

html

css

twitter-bootstrap