如何让我的导航栏流畅地包含最大的元素？

所以我试图让我的标志，以适应我的导航栏里面没有它 “闹翻”，例如：http://i.imgur.com/KoHcBod.png 如何让我的导航栏流畅地包含最大的元素？

相关的代码：

HTML：

<nav class="container-fluid navbar navbar-inverse navbar-static-top" role="navigation"> 
<ul class="nav navbar-nav"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
    </button> 
    <a class="navbar-brand" href="/"><img id="navbar-logo" src="/images/logo_only.png"></a> 
</ul> 
<ul class="navbar-collapse nav navbar-nav navbar-right"> 
[[if .User]] 
    <li><a id="currentUser" href="/account/home">[[.User.Username]]</a></li> 
    <li><a href="/signout">Sign out</a></li> 
[[else]] 
    <li class="[[.SignupActive]]"><a href="/signup">Sign up</a></li> 
    <li class="[[.LoginActive]]"><a href="/login">Log in</a></li> 
    <!--li><a href="#">Support</a></li--> 
[[end]] 
</ul>

CSS：

/* ---------- NAVBAR STYLE ----------- 
----------------------------------- */ 

#navbar-logo { 
height: 50px; 
}

I'v e搜索了多个地方，我无法弄清楚如何做到这一点，而无需手动调整高度（的navbar）。我希望它看起来好像徽标与导航栏顶部和底部的高度相同。万分感谢。

来源

2014-09-29 jrgilman

是您徽标浮动？ – GSaunders 2014-09-29 17:17:18

你能提供你的最终目标的Photoshop快照吗？ V形环周围有多少垂直空间？更好的是，花一些时间将代码粘贴到JSFiddle，Plunkr或Codepen中。 – 2014-09-29 17:22:35

这是在引导一种常见的发生与标志，你需要更多的情况下，因为有其他方法可以做到这一点，但根据您的代码段，你可以这样做：

.navbar-brand{padding:0 !important} 
#navbar-logo { 
height:100%; 
width:auto; 
max-height: 50px; 
}

来源

2014-09-29 17:18:39 Devin

正是我需要的，谢谢。我必须去阅读！重要的标签。 – jrgilman 2014-09-29 17:30:17

！重要的是会覆盖任何CSS声明，无论它是否在CSS后声明。请记住，CSS样式总是以“级联”显示，因此后面应用的是使用的样式。必须谨慎使用！重要规则，因为如果试图影响该规则，除非重新添加！important，否则不会产生任何效果。我已经添加了！重要的是因为我非常确定navbar-brand在那里有一个重要的规则，但是如果它有效的话，请尝试一下，如果它有效的话，那么更好，我将这些代码写出来 – Devin 2014-09-29 17:34:32

如何让我的导航栏流畅地包含最大的元素？

回答

相关问题