我想使用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宽度，因为高度已经设置好了。
这是现场演示
其他回答
快速修复:为你的logo创建一个类，并设置高度为28px。这适用于所有设备上的导航栏。注意，我说的是“WELL”。
.logo {
display:block;
height:28px;
}
对于这个问题，最简单和最好的答案是根据你的logo设置最大宽度和高度，图像的最大高度为50px，但不超过200px。
<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>
这取决于你的logo大小和你的导航栏项目。
我使用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%;
}
演示如何创建一个引导导航栏，其中logo的高度大于默认高度(50px):
示例:100px x 100px的标志，标准CSS:
Compute the height and (padding top + padding bottom) of the logo. Here 120px (100px height + padding top (10px) + padding bottom (10px)) Goto bootstrap / customize. Set instead of navbar height 50px > 120px (50 + 70) and navbar-collapse-max-height from 340px to 410px (340 + 70). Download css. In this example I use this navbar. In navbar-brand: <div class="navbar-header"> ... </button> <a class="navbar-brand myLogo" href="#"> <img src="yourLogo.jpg" /> </a> </div>... add a class, for example myLogo, and an img (your logo) <a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>. Add CSS .myLogo { padding: 10px; } Adequate to other sizes.
例子
您可以尝试使用如下所示的@media查询。
首先添加一个logo类，然后使用@media指定每个设备大小的logo高度和宽度。在下面的例子中，我的目标设备的最大宽度为320px (iPhone)，你可以玩这个，直到你找到最合适的。简单的测试方法:使用带有inspect元素的chrome或Firefox。尽可能缩小你的浏览器。根据您指定的@media max width观察徽标大小的变化。在iPhone, android设备，iPad等上进行测试，以获得理想的结果。
.logo {
height: 42px;
width: 140px;
}
@media (max-width:320px) {
.logo {
height: 33px;
width: 110px;
}
}
