我想使用Bootstrap 3默认导航栏的图像标志，而不是文本品牌。什么是正确的方法来做到这一点，而不引起任何问题与不同的屏幕尺寸?我认为这是一个常见的需求，但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上都有可接受的显示外，一个关键要求是小屏幕上的菜单可折叠性。
我试着在有navbar-brand类的A标签内放置一个IMG标签，但这导致菜单不能在我的android手机上正常运行。我还尝试了增加导航栏类的高度，但这把事情搞砸了。
顺便说一下，我的logo图像比导航栏的高度要大。
当前回答
如果使用LESS，这是有效的:
@navbar-height: 150px;
@navbar-brand-vpadding: 10px;
.navbar-brand img {
height: @navbar-height - @navbar-brand-vpadding * 2;
position: absolute;
top: @navbar-brand-vpadding;
}
其他回答
<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="Buy Sell Rent Everyting">
<img style="max-width:100px; margin-top: -7px;"
src="/img/transparent-white-logo.png">
</a>
</div>
好吧，我终于得到了同样的问题，这是我的解决方案，我在我的网站上测试了三种主要的浏览器:Chrome, Firefox和Internet Explorer。
首先，如果你没有使用基于文本的logo，那么完全删除“navbar-brand”，因为我发现这个特殊的类是导致我的导航菜单折叠的主要原因。
感谢user3137032引导我走向正确的方向。
你需要做一个自定义响应式图像容器，我把我的命名为logo
下面是引导HTML标记:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="@Url.Action(" About ", "Home ")">
<i class="glyphicon glyphicon-info-sign"></i> About
</a>
</li>
<li>
<a href="@Url.Action(" Contact ", "Home ")">
<i class="glyphicon glyphicon-phone"></i> Contact
</a>
</li>
<li>
<a href="@Url.Action(" Index ", "Products ")">
<i class="glyphicon glyphicon-tag"></i> Products
</a>
</li>
</ul>
</div>
</div>
</div>
和CSS代码:
.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}
@media (max-width:480px) {
.logo img {
width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 70% !important;
}
}
@media (max-width:400px) {
.logo img {
width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 75%;
}
}
@media (max-width:385px) {
.logo img {
width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 70%;
}
}
@media (max-width:345px) {
.logo img {
width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 65%;
}
}
@media (max-width:335px) {
.logo img {
width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 60%;
}
}
@media (max-width:325px) {
.logo img {
width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 55%;
}
}
@media (max-width:315px) {
.logo img {
width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 50%;
}
}
@media (max-width: x)中的值可能会根据logo图像的宽度而变化，我的是368px。百分比也可能需要根据你的标志的大小而改变。第一个@media查询应该是你的阈值，我的是图像宽度(368px) +折叠按钮大小(44px) +大约60px，结果是480px，这是我开始响应式图像缩放的地方。
请确保从HTML部分中删除我的剃刀语法。如果它解决了你的问题，就告诉我，它解决了我的问题。
编辑:对不起，我错过了你的导航栏高度问题。有几种方法可以做到这一点，就我个人而言，我用适当的导航栏高度来编译Bootstrap LESS，对于我的目的，我使用70px，我的图像高度是68 px。第二种方法是在bootstrap.css文件中搜索“”。然后改变min-height:到你的logo的高度。
完整的演示与许多例子
重要更新:12/21/15
目前在Mozilla中，我发现了一个错误，在某些浏览器宽度上的导航栏与许多演示在此页。基本上，mozilla的错误是将导航栏品牌链接上的左右填充作为图像宽度的一部分。然而，这可以很容易地修复，我已经测试过了，我相当肯定这是本页上最稳定的工作示例。它会自动调整大小，适用于所有浏览器。
只需将此添加到您的css和使用navbar-brand相同的方式。img-responsive。你的标志将自动适合
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* firefox bug fix */
width: auto;
}
另一种选择是使用背景图像。使用任意大小的图像，然后设置所需的宽度:
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
以下正本答案(只供参考)
人们似乎忘记了很多合身的东西。我个人认为这是最容易使用的，因为图像会自动调整到菜单大小。如果你只是在图像上使用对象匹配，它会自动调整到菜单的高度。
.navbar-brand > img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
有人指出，这在IE中“还不能”工作。有一个填充，但这可能是多余的，如果你不打算用它做任何其他事情。它看起来像是为未来的IE版本计划的对象适配，一旦发生，它将在所有浏览器中工作。
然而，如果你注意到bootstrap中的.img-responsive类，max-width是假设你将这些图像放在列中或具有显式with set的东西中。这意味着100%明确地表示父元素的宽度为100%。
.img-responsive
max-width: 100%;
height: auto;
}
我们不能在导航栏中使用它的原因是父元素(.navbar-brand)有一个固定的高度50px，但宽度没有设置。
如果我们采用这种逻辑，并将其反向为基于高度的响应，我们可以有一个响应图像，缩放到.navbar-brand高度，并通过添加和自动设置宽度，它将调整成比例。
max-height: 100%;
width: auto;
通常我们需要添加display:block;到场景，但由于navbar-brand已经有float:left;应用于它，它自动充当块元素。
您可能会遇到徽标太小的罕见情况。img-responsive方法没有考虑到这一点，但我们会考虑的。通过将"height"属性添加到.navbar-brand > img中，你可以确保它既可以放大也可以缩小。
max-height: 100%;
height: 100%;
width: auto;
所以为了完成这个，我把它们放在一起，它似乎在所有浏览器中都完美地工作。
<style type="text/css">
.navbar-brand>img {
max-height: 100%;
height: 100%;
width: auto;
margin: 0 auto;
/* probably not needed anymore, but doesn't hurt */
-o-object-fit: contain;
object-fit: contain;
}
</style>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
演示http://codepen.io/bootstrapped/pen/KwYGwq
我的工作代码- bootstrap 3.0.3。 当导航条切换，隐藏的x原始标志图像。
<a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
</a>
<a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
</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(在这种情况下，没有< >标记)。
