我想在Twitter Bootstrap 3.1.1中做一个完全响应的指定高度的navbar，其中的品牌可以包括图像(徽标)或文本。
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\u0026amp;text=logo”alt =“”>到< h3> AppName< / h3>使AppName不在中间：
目前它的中心是通过设置填充值，但我不知道如何使它独立于它。
有没有人可以帮助我解决这个问题？
问候
编辑：
这里是我想要实现的效果的准备的图像：
不折叠导航栏与徽标图像：
折叠的导航栏(导航栏的高度相同，图像的大小相同，但宽度不同的导航栏)：
折叠导航栏(除了改变浏览器的窗口宽度导致的导航栏宽度之外，一切都相同)：
解决方法
如果你想实现
this(你可以调整窗口的大小，看看它将如何寻找手机版)，所有你需要做的是有2个标志图像(一个桌面和一个移动)，并显示它们取决于环境使用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;
}