我想使用Bootstrap 3默认导航栏的图像标志，而不是文本品牌。什么是正确的方法来做到这一点，而不引起任何问题与不同的屏幕尺寸?我认为这是一个常见的需求，但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上都有可接受的显示外，一个关键要求是小屏幕上的菜单可折叠性。
我试着在有navbar-brand类的A标签内放置一个IMG标签，但这导致菜单不能在我的android手机上正常运行。我还尝试了增加导航栏类的高度，但这把事情搞砸了。
顺便说一下，我的logo图像比导航栏的高度要大。
当前回答
我的工作代码- bootstrap 3.0.3。 当导航条切换，隐藏的x原始标志图像。
<a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
</a>
<a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
</a>
其他回答
如果使用LESS，这是有效的:
@navbar-height: 150px;
@navbar-brand-vpadding: 10px;
.navbar-brand img {
height: @navbar-height - @navbar-brand-vpadding * 2;
position: absolute;
top: @navbar-brand-vpadding;
}
我的工作代码- bootstrap 3.0.3。 当导航条切换，隐藏的x原始标志图像。
<a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
</a>
<a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
</a>
对于这个问题，最简单和最好的答案是根据你的logo设置最大宽度和高度，图像的最大高度为50px，但不超过200px。
<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>
这取决于你的logo大小和你的导航栏项目。
我还通过css后台属性实现它。它在任何宽度值下都能正常工作。
.navbar-brand{
float:left;
height:50px;
padding:15px 15px;
font-size:18px;
line-height:20px;
background-image: url("../images/logo.png");
background-repeat: no-repeat;
background-position: left center
}
这不是语义上的，我只是使用现有的a元素，设置背景图像，然后为@2倍分辨率创建多个变量，较小的屏幕尺寸等。
然后，您可以使用.text-hide类以传统的方式在页面上获取一些文本。简单而有效，但不是正确使用图像。
下面是文本替换助手类的链接:
http://getbootstrap.com/css/#helper-classes
