Bootstrap充分响应导航栏与标志或品牌名称文本
我想在Twitter Bootstrap 3.1.1中做一个具有指定高度的完全响应式导航栏，品牌可以由图片（标识）或文本组成。
HTML：
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <img src="http://placehold.it/150x50&text=Logo" alt=""> </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav> CSS：
body { margin-top: 125px; } .navbar-fixed-top .nav { padding: 15px 0; }
问题是，浏览器的窗口大小减less，菜单折叠后，导航栏返回到原来的高度，标志图像如下：
另一个问题是，将<img src="http://placehold.it/150x50&text=Logo" alt="">更改为<h3>AppName</h3>使得AppName不在中间：
目前它是通过设置填充值来居中，但是我不知道如何使它独立于它。
有没有人可以帮我解决这个问题？
问候
编辑：
这里准备了我想要达到的效果图像：
没有折叠与标志图像的导航栏：
折叠的导航栏（导航栏的高度相同，图片的大小相同，但导航栏的宽度不同）：
没有折叠的品牌名称文本的导航栏：
折叠的导航栏（除了由于改变浏览器的窗口宽度导致的导航栏的宽度，所有内容都是一样的）：
如果你想达到这个目标 （你可以调整窗口的大小来查看移动版本），你只需要有2个标识图像（1个用于桌面，1个用于移动），并根据环境显示使用visible-xs和hidden-xs类。
所以我使用了这样的东西：
<img class="hidden-xs" src="http://placehold.it/150x50&text=Logo" alt=""> <img class="visible-xs" src="http://placehold.it/120x40&text=Logo" alt="">
当然，我使用以下方式devise移动徽标：
@media (max-width: 767px) { .navbar-brand { padding: 0; } .navbar-brand img { margin-top: 5px; margin-left: 5px; } }
你可以在这里看到所有的代码。 如果你需要一个手机版本的徽标的文字，这不是一个大问题。 只需用<h1 class="visible-xs">AppName</h3>replace徽标，然后像下面这样更改媒体查询中的样式：
@media (max-width: 767px) { .navbar-brand { padding: 0; } .navbar-brand h1{ //here add your style depending of the position you want the text to be placed } }
编辑：
你需要这个条件来使它工作：
.navbar-toggle { margin: 23px 0; } .navbar-nav, .navbar-nav li, .navbar-nav li a { height: 80px; line-height: 80px; } .navbar-nav li a { padding-top: 0; padding-bottom:0; }
在navbar-inner类和容器navbar-inner添加品牌徽标的最佳方法。 关于<h3>问题<h3>在引导过程中有一定的填充，就像@creimers告诉的那样。 如果您使用的是更大的图片，请增加导航栏的高度，否则徽标会浮出。
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="navbar-inner"> <!--changes made here--> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <img src="http://placehold.it/150x50&text=Logo" alt=""> </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> </nav>
您包含的占位符图片的高度为50px 。 它被封装在一个anchor (.navbar-brand) ， padding-top为15px ，高度为50px 。 这就是为什么占位符徽标stream出酒吧。 尝试包括一个较小的图像，或通过指定一个class或一个id到锚点的填充玩你可以参考你的css 。
编辑或从.navbar-brand删除静态height: 50px 。 你的导航栏将会占据最高的孩子的高度。
引导程序中的h3默认具有20 20px的padding-top 。 再次，它是用该padding-top: 15px锚点包装的。 这就是为什么它不像你想要的那样垂直居中。 你可以给h3一个class或id和id来重置margin-top。 你可以用anchor的padding来做同样的事情。
这里可以玩： http : //jsbin.com/jelec/1/edit?html,output
我检查，它为我工作。
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top:100px;"><!--style with margin-top according to your need--> <ul class="nav navbar-nav navbar-right"> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div>
我设置了.navbar-brand { min-height: inherit }为我解决了这个问题（感谢@creimers的灵感）。
