html - 如何将 navbar-brand 与其余链接对齐

Question

如果我在链接旁边使用图像，导航栏会变大。

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                <img src="..." /> // this is causing the problem 
             Me<span class="caret"></span>
                  </a>
        <ul class="dropdown-menu" role="menu">
            <li><a>Sample 1</a>
            </li>
            <li class="divider"></li>
            <li><a>Sample 1</a>
            </li>
        </ul>
    </li>
</ul>

结果是http://jsfiddle.net/6xzwdwfr/18/embedded/result/ .但是我该怎么做才能让它看起来像 http://jsfiddle.net/6xzwdwfr/21/embedded/result/ ？

基本上，我想确保添加图像不会导致导航栏放大。

我尝试减少 nav* 类中的一些填充和边距，但这只会让事情变得更糟。

如何调整？

Answer 1

从 .navbar-nav > li > a 中删除顶部和底部的填充

.navbar-nav > li > a {
  padding: 0px 12px;
  margin: 12.5px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
}