我想使用Bootstrap 3默认导航栏的图像标志，而不是文本品牌。什么是正确的方法来做到这一点，而不引起任何问题与不同的屏幕尺寸?我认为这是一个常见的需求，但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上都有可接受的显示外，一个关键要求是小屏幕上的菜单可折叠性。
我试着在有navbar-brand类的A标签内放置一个IMG标签，但这导致菜单不能在我的android手机上正常运行。我还尝试了增加导航栏类的高度，但这把事情搞砸了。
顺便说一下，我的logo图像比导航栏的高度要大。
当前回答
我没有替换文本标记，而是像下面的代码一样分成两行，并将img-responsive类赋予图像......
<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
<div class="container" style="margin-bottom:-1px;">
<div class="row">
<div class="col-md-3">
<div id="menubar-logo">
<a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
</div>
</div>
<div class=" col-md-offset-3 col-md-6">
<ul class="nav navbar-nav">
<li><a href="index.php" class="active">Home</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="contact_us.php">Contact Us</a></li>
</ul>
</div>
</div>
<!-- end of "row" -->
</div>
<!-- end of "container" -->
</div>
<!-- end of "collapse" -->
此外，我添加了以下css代码.......
#menubar-logo img {
margin-top: 10px;
margin-bottom: 20px;
margin-right: 10px;
}
如果我的代码解决了您的问题，这是我的荣幸.....
其他回答
也许这太简单了，但我只是复制了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的高度)。
我使用img-responsive类，然后在a元素上设置max-width。是这样的:
<nav class="navbar">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="img-responsive" src="mylogo.png">
</a>
</div>
</nav>
和CSS:
.navbar-brand {
max-width: 50%;
}
我的方法是为手机、平板电脑、台式机、大型台式机包括四张不同大小的图像，但只显示一张使用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。
快速修复:为你的logo创建一个类，并设置高度为28px。这适用于所有设备上的导航栏。注意，我说的是“WELL”。
.logo {
display:block;
height:28px;
}
虽然你的问题很有趣，但我不认为会有一个答案。也许你的问题太宽泛了。 你的解决方案应该取决于:导航栏中的其他内容(条目的数量)，你的logo的大小，你的logo是否响应，等等。 在a中添加logo(使用navbar-brand)似乎是一个很好的起点。我应该使用navbar-brand类，因为这将添加一个15像素的填充(顶部/底部)。
我在http://getbootstrap.com/examples/navbar/上用300x150像素的logo测试了这个设置。
全屏> 1200:
768到992像素之间(菜单未折叠):
<768(菜单折叠)
除了美学方面，我没有发现任何技术问题。在小屏幕上，大标志可能会重叠或打破视口。 在768到992像素之间的屏幕上，当内容不在一条线上时，还会出现其他问题，例如:https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18
默认的导航栏示例添加了一个30px的底边距，所以你的导航栏的内容永远不会与你的页面的内容重叠。(固定导航栏会有问题时，导航栏的高度变化)。
您将需要一些css和媒体查询，以适应导航栏在不同屏幕尺寸上的需要。请缩小你的问题范围。B.e.描述一下你在android上发现的问题。
更新示例请参见http://bootply.com/77512。
在手机等较小的屏幕上，折叠菜单出现在logo上方
在代码中转换按钮和logo，首先是logo(设置float: logo上的左)
除了顶部，没有办法将菜单项对齐到任何地方
为.navbar-collapse ul设置margin-top。使用标志高度减去导航栏高度，以对齐到底部或(标志高度-导航栏高度)/ 2到中心
