大佬教程收集整理的这篇文章主要介绍了twitter-bootstrap – Bootstrap完全响应的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不在中间：
目前它的中心是通过设置填充值，但我不知道如何使它独立于它。
有没有人可以帮助我解决这个问题？
问候
编辑：
这里是我想要实现的效果的准备的图像：
不折叠导航栏与徽标图像：
折叠的导航栏(导航栏的高度相同，图像的大小相同，但宽度不同的导航栏)：
折叠导航栏(除了改变浏览器的窗口宽度导致的导航栏宽度之外，一切都相同)：
所以我使用这样的东西：
<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; }
以上是大佬教程为你收集整理的twitter-bootstrap – Bootstrap完全响应的navbar带有标志或品牌名称的文本全部内容，希望文章能够帮你解决twitter-bootstrap – Bootstrap完全响应的navbar带有标志或品牌名称的文本所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。