我想在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;
}
问题是，在浏览器的窗口大小减小并且菜单折叠后，导航栏将返回其原始高度，徽标图像如下所示：
另一个问题是将<img src="http://placehold.it/150x50&text=Logo" alt="">更改为<h3>AppName</h3>会使AppName不在中间：
目前它通过设置填充值来居中，但我不知道如何让它独立于它。
有谁能帮我解决这个问题？
问候
编辑：
以下是我想要实现的效果的准备图像：
没有折叠的导航栏与徽标图像：
折叠导航栏（导航栏高度相同，图像大小相同，但导航栏宽度不同）：
没有折叠带有品牌名称文字的导航栏：
折叠导航栏（除了更改浏览器窗口宽度导致的导航栏宽度外，一切都相同）：
如果你想实现this（你可以调整窗口大小以查看它将如何显示移动版本），你所要做的就是拥有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="">
当然，我使用以下方式设计移动徽标：
@media (max-width: 767px) {
.navbar-brand {
padding: 0;
}
.navbar-brand img {
margin-top: 5px;
margin-left: 5px;
}
}
你可以看到所有代码here。如果你需要一个关于徽标的移动版本的文本，这不是什么大不了的事。只需用<h1 class="visible-xs">AppName</h3>替换徽标，然后更改媒体查询中的样式，如下所示：
@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类和容器中添加品牌徽标的最佳方法。关于<h3>问题<h3>在bootstrap中有一定的填充，正如@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或class，你可以在你的id中引用它。
编辑或从css删除静态height: 50px。然后，您的导航栏将采用其最高子项的高度。
默认情况下，.navbar-brand在引导程序中有h3的padding-top。再次，它用20px锚包裹。这就是为什么它不像你想要的那样垂直居中。你可以给padding-top: 15px一个h3或class重置边缘顶部。你可以用id的padding做同样的事情。
这里有一些东西可以玩：anchor
我查了一下，它对我有用。
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>
为我解决了这个问题（感谢@creimers的灵感）。