我想使用Bootstrap 3默认导航栏的图像标志,而不是文本品牌。什么是正确的方法来做到这一点,而不引起任何问题与不同的屏幕尺寸?我认为这是一个常见的需求,但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上都有可接受的显示外,一个关键要求是小屏幕上的菜单可折叠性。
我试着在有navbar-brand类的A标签内放置一个IMG标签,但这导致菜单不能在我的android手机上正常运行。我还尝试了增加导航栏类的高度,但这把事情搞砸了。
顺便说一下,我的logo图像比导航栏的高度要大。
我想使用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>高度是20px,所以如果你在logo上指定height: 20px,它会很好地对齐。
然而,这对于一个标志来说有点小,所以我选择了这个:
<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="Brand">
<img style="height: 30px; margin-top: -5px;"
src="/img/brand.png">
</a>
</div>
这使得图像高30px,并通过在顶部添加负边距来垂直对齐图像(5px是a上的填充物与图像大小之差的一半)。
你也可以改变<a>元素的填充,例如:
<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="Brand" style="padding-top: 10px; padding-bottom: 10px">
<img style="height: 30px;"
src="/img/transparent-white-logo.png">
</a>
</div>
演示如何创建一个引导导航栏,其中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.
例子
你必须像这样使用代码:
<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="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style=""
src="/img/transparent-white-logo.png">
</a>
</div>
A类标签必须是“logo”而不是navbar-brand。
完整的演示与许多例子
重要更新: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
您可以尝试使用如下所示的@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;
}
}