html - 将图像添加到 Bootstrap 导航栏会使其大小错误

Question

所以我从 Steam cdn 得到一张 32x32 的图像，我想将它添加到导航栏。

这是我目前拥有的带有图像的导航栏部分的代码:

<ul class="nav navbar-nav navbar-right">
        <style type="text/css">
          #login:hover {
            background-color:transparent;
          }
        </style>
          <li class="dropdown" id="login">
            <a href="#" class="dropdown-toggle brand" data-toggle="dropdown" role="button" aria-expanded="false" id="pgurl"><img src="http://mysitemyway.com/_shared/images/icons/black/Clock.png"/>Username</a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Logout</a></li>
            </ul>
      </ul>

使用它，它让我的导航栏这样做:

使用 this question 中的代码它改变了文本和图像的对齐方式，但保持导航栏不变。

真的，我的问题是如何在文本旁边使用该图像而不破坏导航栏的大小，这会破坏悬停和事件触发器？

DEMO

Answer 1

检查 .navbar 或 min-height 或 height 是否固定，然后使用 CSS 将其覆盖到您想要的高度:

尝试找到一个既适合图像又适合文本的高度。如有必要，您可以移动图像:

.navbar {
    height: 40px;
}

.navbar img {
    position: relative;
    top: -8px;
}