我想使用Bootstrap 3默认导航栏的图像标志，而不是文本品牌。什么是正确的方法来做到这一点，而不引起任何问题与不同的屏幕尺寸?我认为这是一个常见的需求，但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上都有可接受的显示外，一个关键要求是小屏幕上的菜单可折叠性。
我试着在有navbar-brand类的A标签内放置一个IMG标签，但这导致菜单不能在我的android手机上正常运行。我还尝试了增加导航栏类的高度，但这把事情搞砸了。
顺便说一下，我的logo图像比导航栏的高度要大。
当前回答
演示如何创建一个引导导航栏，其中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.
例子
其他回答
这不是语义上的，我只是使用现有的a元素，设置背景图像，然后为@2倍分辨率创建多个变量，较小的屏幕尺寸等。
然后，您可以使用.text-hide类以传统的方式在页面上获取一些文本。简单而有效，但不是正确使用图像。
下面是文本替换助手类的链接:
http://getbootstrap.com/css/#helper-classes
另一种方法是在.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宽度，因为高度已经设置好了。
这是现场演示
请尝试以下代码:
<style>
.navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/140x34/000000/ffffff/&text=LOGO" alt="">
</a>
我没有替换文本标记，而是像下面的代码一样分成两行，并将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;
}
如果我的代码解决了您的问题，这是我的荣幸.....
我也有同样的问题。我是这样解决的:
<a href="#" class="btn btn-link navbar-btn">
<img class="img-responsive" src="#">
</a>
没有navbar-brand类。结果看起来像徽标图片，适合导航栏和工作就像一个链接。此外，我建议使用导航栏右侧类的菜单项，这样他们就不会到下面的标志。
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav" role="navigation">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
</ul>
</div>
