我想使用Bootstrap 3默认导航栏的图像标志，而不是文本品牌。什么是正确的方法来做到这一点，而不引起任何问题与不同的屏幕尺寸?我认为这是一个常见的需求，但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上都有可接受的显示外，一个关键要求是小屏幕上的菜单可折叠性。
我试着在有navbar-brand类的A标签内放置一个IMG标签，但这导致菜单不能在我的android手机上正常运行。我还尝试了增加导航栏类的高度，但这把事情搞砸了。
顺便说一下，我的logo图像比导航栏的高度要大。
当前回答
另一种方法是在.navbar-brand旁边实现Bootstrap内置的.text-hide类，用背景图像替换品牌文本/内容。
CSS:
.navbar-brand{
background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
width: 200px;
}
HTML:
<a class="navbar-brand text-hide" href="#">Navbar Brand</a>
这是一个非常一致的方法，保持你的图像居中。要调整图像的大小，你需要做的就是调整.navbar-brand宽度，因为高度已经设置好了。
这是现场演示
其他回答
我的方法是为手机、平板电脑、台式机、大型台式机包括四张不同大小的图像，但只显示一张使用bootstrap的响应实用程序类，如下所示:
<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->
<a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
注意:您可以用所提供的代码替换注释行。如果不使用wordpress，请替换php代码。
编辑Note2:是的，这会在加载页面时向服务器添加请求，这可能会变慢一点，但如果你使用后台css精灵技术，打印页面时很可能不会打印logo，上面的代码应该会得到更好的SEO。
如果使用LESS，这是有效的:
@navbar-height: 150px;
@navbar-brand-vpadding: 10px;
.navbar-brand img {
height: @navbar-height - @navbar-brand-vpadding * 2;
position: absolute;
top: @navbar-brand-vpadding;
}
对于这个问题，最简单和最好的答案是根据你的logo设置最大宽度和高度，图像的最大高度为50px，但不超过200px。
<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>
这取决于你的logo大小和你的导航栏项目。
也许这太简单了，但我只是复制了navbar-brand行，所以有两个，图像和文本。
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>
我创建了一个图像，适合在导航栏(大约1/2的高度)。
这取决于你想让你的标志有多高。
导航栏中默认的<a>高度是20px，所以如果你在logo上指定height: 20px，它会很好地对齐。
然而，这对于一个标志来说有点小，所以我选择了这个:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<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" rel="home" href="#" title="Brand">
<img style="height: 30px; margin-top: -5px;"
src="/img/brand.png">
</a>
</div>
这使得图像高30px，并通过在顶部添加负边距来垂直对齐图像(5px是a上的填充物与图像大小之差的一半)。
你也可以改变<a>元素的填充，例如:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<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" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
<img style="height: 30px;"
src="/img/transparent-white-logo.png">
</a>
</div>
