我想使用Bootstrap 3默认导航栏的图像标志，而不是文本品牌。什么是正确的方法来做到这一点，而不引起任何问题与不同的屏幕尺寸?我认为这是一个常见的需求，但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上都有可接受的显示外，一个关键要求是小屏幕上的菜单可折叠性。
我试着在有navbar-brand类的A标签内放置一个IMG标签，但这导致菜单不能在我的android手机上正常运行。我还尝试了增加导航栏类的高度，但这把事情搞砸了。
顺便说一下，我的logo图像比导航栏的高度要大。
当前回答
将以下内容添加到.navbar-brand类中
.navbar-brand
{
padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}
.navbar-brand > img
{
height: 100%; // set height to occupy full height space on the navbar-brand
width: auto; // width should be auto to allow img to scale accordingly
max-height: 100%; // optional
margin: 0 auto; // optional
}
其他回答
为什么每个人都想用艰难的方式来做?当然，其中一些方法是有效的，但它们比必要的要复杂得多。
好的，首先，你需要一个图像，将适合你的导航栏。你可以通过css的height属性来调整你的图像(允许宽度缩放)，或者你可以只使用一个适当大小的图像。无论你决定做什么，这看起来将取决于你的图像大小。
出于某种原因，每个人都想用navbar-brand将图像粘在锚中，这是不必要的。navbar-brand应用的文本样式，不是必要的图像，以及navbar-left类(就像拉左，但用于导航栏)。所有你真正需要的是添加导航栏左。
<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>
你甚至可以用一个导航栏品牌项目，它将出现在图像的右侧。
在我的情况下，没有让任何其他答案工作(我可能没有通过智力测试)，经过一些实验，这是我正在使用的(我相信非常接近Bootstrap默认值):
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-logo">
<a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
<img src="~/Images/logo.png" class="img-responsive">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
<li>@Html.ActionLink("Resources", "Resources", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("Blog", "Blog", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
</div>
在CSS文件中，我添加了以下内容:
.navbar-brand {
padding-top: 5px;
}
.navbar-collapse {
float: left;
}
.navbar-logo {
float: left;
}
注意@Html.ActionLink()是一个<a>标记的Razor语法。当它说@Html.ActionLink(…)时，只需将其替换为适当的<a>标记。同样，当它说@Url.Action(…)时，将其替换为适当的URL(在这种情况下，没有< >标记)。
这段代码工作完美，如果你需要看到品牌居中和自动宽度工具栏。 它包含从正确路径获取图像文件的Wordpress函数:
<a class="navbar-brand page-scroll" rel="home"
href="#page-top" title="Title">
<img style="height: 100%; width: auto;"
src="<?php echo get_template_directory_uri();?>/img/logo.png">
我也有同样的问题。我是这样解决的:
<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>
对于这个问题，最简单和最好的答案是根据你的logo设置最大宽度和高度，图像的最大高度为50px，但不超过200px。
<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>
这取决于你的logo大小和你的导航栏项目。
