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＆gt;中移除顶部和底部填充。 li>一个

.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>更多的空间。我在你的小提琴中试过它并且它有效。

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

3 个答案: