如何将导航栏品牌与其余链接对齐

Question

If I use an image along side a link, the navbar is getting bigger.

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

The result is http://jsfiddle.net/6xzwdwfr/18/embedded/result/ . But how do I make it so that it looks like http://jsfiddle.net/6xzwdwfr/21/embedded/result/ ?

Basically, I want to make sure that adding the image doesn't cause the navbar to enlarge.

I tried lessening some of the paddings and margins in the nav* classes, but it only made the matters worse.

How can I adjust it?

Answer 1

Remove top and bottom paddings from .navbar-nav > li > a

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

Answer 2

如果您想要将图像放在导航栏中以使其适合并保持该比例，则可以查看以下已回答的帖子： 如何在div内适合图像（img）并保持纵横比？

Answer 3

Try re-sizing the <a> that contains the image by adding the following code:

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

This way, the <a> element doesn't take up any more space than the <img> it contains. I tried it in your Fiddle and it worked.