如何将navbar品牌与其他链接对齐

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>李顶部和底部的垫衬>一

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

Answer 2

如果你想要的是把你的图片在导航栏，因此适合在并保持率，你可能需要一看看这个回答后： How do I fit an image (img) inside a div and keep the aspect ratio?

Answer 3

尝试重新调整大小，通过添加以下代码包含图像的<a>：

li.dropdown > a { 
    height: 34px; 
} 

这样，<a>元素不会占用其包含的<img>以上的空间。我在你的小提琴中尝试过它，它工作。