CSS 带有徽标的 Bootstrap 3 导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18474564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Navbar with Logo
提问by stepanian
I want to use the Bootstrap 3 default navbar with an image logo instead of text branding. What's the proper way of doing this without causing any issues with different screen sizes? I assume this a common requirement, but I haven't yet seen a good code sample. A key requirement other than having acceptable display on all screen sizes is the menu collapsibility on smaller screens.
我想使用带有图像徽标而不是文本品牌的 Bootstrap 3 默认导航栏。在不引起不同屏幕尺寸的任何问题的情况下，这样做的正确方法是什么？我认为这是一个常见的要求，但我还没有看到好的代码示例。除了在所有屏幕尺寸上都具有可接受的显示效果之外，一个关键要求是较小屏幕上的菜单可折叠性。
I tried just putting an IMG tag inside the A tag that has the navbar-brand class, but that caused the menu not to function properly on my android phone. I also tried increasing the height of the navbar class, but that screwed things up even more.
我尝试将 IMG 标签放在具有导航栏品牌类的 A 标签中，但这导致菜单无法在我的 android 手机上正常运行。我还尝试增加导航栏类的高度，但这让事情变得更糟。
By the way, my logo image is larger than the height of the navbar.
顺便说一句，我的徽标图像大于导航栏的高度。
回答by Michael
Why is everyone trying to do it the hard way? Sure, some of these approaches will work, but they're more complicated than is necessary.
为什么每个人都试图以艰难的方式做到这一点？当然，其中一些方法会奏效，但它们比必要的要复杂。
OK, first - you need an image that will fit within your navbar. You can adjust your image via css height attribute (allowing width to scale) or you can just use an appropriately sized image. Whatever you decide to do - the way this looks will depend on how well you size your image.
好的，首先 - 您需要一个适合您的导航栏的图像。您可以通过 css 高度属性（允许宽度缩放）调整您的图像，或者您可以只使用适当大小的图像。无论您决定做什么 - 这看起来的方式取决于您调整图像的大小。
For some reason, everyone wants to stick the image inside of an anchor with navbar-brand, and this isn't necessary. navbar-brandapplies text styles that aren't necessary to an image, as well as the navbar-leftclass (just like pull-left, but for use in a navbar). All you really need is to add navbar-left.
出于某种原因，每个人都想用 将图像粘贴在锚点内navbar-brand，而这没有必要。 navbar-brand将不需要的文本样式应用于图像以及navbar-left类（就像向左拉一样，但用于导航栏中）。您真正需要的只是添加navbar-left.
<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>
You can even follow this with a navbar-brand item, which will appear to the right of the image.
您甚至可以使用导航栏品牌项目进行跟踪，该项目将出现在图像的右侧。
回答by Vicky
<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>
回答by Bryan Willis
COMPLETE DEMO WITH MANY EXAMPLES
包含许多示例的完整演示
IMPORTANT UPDATE: 12/21/15
重要更新：12/21/15
There is currently a bug in MozillaI discovered that breaks the navbar on certain browser widths with MANY DEMOS ON THIS PAGE. Basically the mozilla bug is including the left and right padding on the navbar brand link as part of the image width. However, this can be fixed easily and I've tested this out and I fairly sure it's the most stable working example on this page. It will resize automatically and works on all browsers.
目前我发现Mozilla 中存在一个错误，该错误在某些浏览器宽度上破坏了导航栏，并在此页面上显示了许多演示。基本上，mozilla 错误包括导航栏品牌链接上的左右填充作为图像宽度的一部分。但是，这可以很容易地修复，我已经对此进行了测试，我相当确定它是此页面上最稳定的工作示例。它将自动调整大小并适用于所有浏览器。
Just add this to your css and use navbar-brand the same way you would .img-responsive. Your logo will automatically fit
只需将其添加到您的 css 中，并像使用.img-responsive. 您的徽标将自动适合
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* firefox bug fix */
width: auto;
}
Another option is to use a background image. Use an image of any size and then just set the desired width:
另一种选择是使用背景图像。使用任意大小的图像，然后设置所需的宽度：
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
ORIGINAL ANSWER BELOW (for reference only)
以下原答案（仅供参考）
People seem to forget about object-fit a lot. Personally I think it's the easiest one to work with because the image automatically adjusts to the menu size. If you just use object fit on the image it will auto resize to the menus height.
人们似乎忘记了对象适合很多。我个人认为这是最容易使用的，因为图像会自动调整到菜单大小。如果您只是在图像上使用适合对象，它会自动调整到菜单高度。
.navbar-brand > img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
It was pointed out that this does not work in IE "yet". There is a polyfill, but that might be excessive if you don't plan on using it for anything else. It does look like object-fit is being plannedfor a future release of IE so once that happens this will work in all browsers.
有人指出，这“还”在 IE 中不起作用。有一个polyfill，但如果你不打算将它用于其他任何事情，那可能会过分。看起来 object-fit正在计划用于 IE 的未来版本，因此一旦发生这种情况，这将适用于所有浏览器。
However, if you notice the .img-responsive class in bootstrap the max-width is assuming you are putting these images in columns or something that has an explicit with set. This would mean that 100% specifically means 100% width of the parent element.
但是，如果您注意到 bootstrap 中的 .img-responsive 类，则 max-width 假设您将这些图像放在列或具有显式设置的内容中。这意味着 100% 特指父元素的 100% 宽度。
.img-responsive
max-width: 100%;
height: auto;
}
The reason we can't use that with the navbar is because the parent (.navbar-brand) has a fixed height of 50px, but the width is not set.
我们不能在导航栏上使用它的原因是因为父级 (.navbar-brand) 具有 50px 的固定高度，但未设置宽度。
If we take that logic and reverseit to be responsive based on the height we can have a responsive image that scales to the .navbar-brand height and by adding and auto set width it will adjust to proportion.
如果我们采用该逻辑并将其反转为基于高度的响应，我们可以拥有一个可缩放到 .navbar-brand 高度的响应图像，并且通过添加和自动设置宽度，它将调整为比例。
max-height: 100%;
width: auto;
Usually we would have to add display:block;to the scenario, but since navbar-brand already has float:left; applied to it, it automatically acts as a block element.
通常我们必须添加display:block;到场景中，但由于导航栏品牌已经有 float:left; 应用于它，它会自动充当块元素。
You may run into the rare situation where your logo is too small. The img-responsive approach does not take this into account, but we will. By also adding the "height" attribute to the .navbar-brand > imgyou can be assured that it will scale up as well as down.
您可能会遇到徽标太小的罕见情况。img-responsive 方法没有考虑到这一点，但我们会考虑的。通过还将“高度”属性添加到.navbar-brand > img您可以确保它会放大和缩小。
max-height: 100%;
height: 100%;
width: auto;
So to complete this I put them both together and it seems to work perfectly in all browsers.
所以为了完成这个，我把它们放在一起，它似乎在所有浏览器中都能完美运行。
<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>
DEMOhttp://codepen.io/bootstrapped/pen/KwYGwq
演示http://codepen.io/bootstrapped/pen/KwYGwq
回答by Sun
Instruction how to create a bootstrap navbar with a logo which is larger than the default height (50px):
说明如何使用大于默认高度（50px）的徽标创建引导导航栏：
Examplewith a logo 100px x 100px, standard CSS:
带有 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 height50px > 120px(50 + 70) and navbar-collapse-max-heightfrom 340px to 410px(340 + 70). Downloadcss.
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>...adda 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.
计算徽标的高度和（顶部填充 + 底部填充）。这里120px（100px 高度 + padding top (10px) + padding bottom (10px)）
转到引导程序/自定义。设置而不是导航栏高度50px > 120px(50 + 70) 和navbar-collapse-max-height从 340px 到410px(340 + 70)。下载css。
在这个例子中，我使用了这个导航栏。在导航栏品牌中：
<div class="navbar-header"> ... </button> <a class="navbar-brand myLogo" href="#"> <img src="yourLogo.jpg" /> </a> </div>...添加一个类，例如myLogo和一个img（您的徽标）
<a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>.添加CSS
.myLogo { 填充：10px; }
适合其他尺寸。
回答by Bass Jobsen
Although your question is interesting i don't expect there will be one answer for it. Maybe your question is too broad. Your solution should depend on: other content in the navbar (number of items), sizes of your logo, should your logo act responsive, etc. Adding the logo in the a (with navbar-brand) seems a good starting point. I should use the navbar-brand class because this will add a padding (top / bottom) of 15 pixels.
虽然你的问题很有趣，但我不希望会有一个答案。也许你的问题太宽泛了。您的解决方案应取决于：导航栏中的其他内容（项目数）、徽标的大小、您的徽标是否应响应等。在 a（带有导航栏品牌）中添加徽标似乎是一个很好的起点。我应该使用 navbar-brand 类，因为这将添加 15 像素的填充（顶部/底部）。
I test this setting on http://getbootstrap.com/examples/navbar/with a logo of 300x150 pixels.
我在http://getbootstrap.com/examples/navbar/ 上使用 300x150 像素的徽标测试此设置。
Full screen > 1200:
全屏 > 1200：
between 768 and 992 pixels (menu not collapsed):
768 到 992 像素之间（菜单未折叠）：
<768 (menu collapsed)
<768（菜单折叠）
Beside the aesthetic aspects i did not find any technical problem. On small screens a big logo will overlap or break out the viewport maybe. Screens between 768 and 992 pixels also have other problems when the content doesn't fit in a line, see for example: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18
除了美学方面，我没有发现任何技术问题。在小屏幕上，大徽标可能会重叠或打破视口。当内容不适合一行时，768 到 992 像素之间的屏幕也会出现其他问题，例如参见：https: //github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18
The default navbar hasThe default navbar example adds a bottom-margin of 30px so the content of your navbar should never overlap the content of your page. (fixed navbars will have problems when the height of the navbar varies).
默认导航栏具有默认导航栏示例添加 30px 的下边距，因此导航栏的内容不应与页面内容重叠。（当导航栏的高度变化时，固定的导航栏会出现问题）。
You will need some css and media queries to adapt the navbar to your need on different screen sizes. Please try to narrow your question. b.e. describe the problem you found on android.
您将需要一些 css 和媒体查询来使导航栏适应您在不同屏幕尺寸上的需求。请尝试缩小您的问题范围。描述您在 android 上发现的问题。
updatesee http://bootply.com/77512for an example.
更新示例参见http://bootply.com/77512。
On smaller screens such as a phone, the collapsed menu appears above the logo
在手机等较小的屏幕上，折叠菜单出现在徽标上方
interchange the button and the logo in your code, logo first (set float:left on the logo)
交换代码中的按钮和徽标，首先是徽标（在徽标上设置浮动：左）
There is no way to align the menu items to anything except top
没有办法将菜单项与除顶部以外的任何内容对齐
set the margin-topfor .navbar-collapse ul. Use logo height minus navbar height, to align to the bottom or (logo height - navbar height) / 2 to center
设置margin-top为.navbar-collapse ul. 使用徽标高度减去导航栏高度，对齐到底部或（徽标高度 - 导航栏高度）/ 2 到中心
回答by Derek Williams
Well I finally got this same problem working, here is my solution and I tested it on my site in all three major browsers: Chrome, Firefox, and Internet Explorer.
好吧，我终于解决了同样的问题，这是我的解决方案，我在我的网站上在所有三种主要浏览器中对其进行了测试：Chrome、Firefox 和 Internet Explorer。
First of all if you are not using a text based logo then remove "navbar-brand" completely as I found this particular class to be the main cause of my collapsed nav menu doubling up.
首先，如果您不使用基于文本的徽标，请完全删除“navbar-brand”，因为我发现这个特定的类是我折叠的导航菜单加倍的主要原因。
Shout out to user3137032 for leading me in the right direction.
向 user3137032 大喊大叫，让我朝着正确的方向前进。
You have to make a custom responsive image container, I called mine "logo"
你必须制作一个自定义的响应式图像容器，我称之为“标志”
Here is the bootstrap HTML mark up:
这是引导程序 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>
And the CSS code:
和 CSS 代码：
.logo img {
width: 100% ; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}
@media (max-width:480px) {
.logo img {
width: 70% ; /*Force IE10 and below to size SVG images correctly*/
max-width: 70% !important;
}
}
@media (max-width:400px) {
.logo img {
width: 75% ; /*Force IE10 and below to size SVG images correctly*/
max-width: 75%;
}
}
@media (max-width:385px) {
.logo img {
width: 70% ; /*Force IE10 and below to size SVG images correctly*/
max-width: 70%;
}
}
@media (max-width:345px) {
.logo img {
width: 65% ; /*Force IE10 and below to size SVG images correctly*/
max-width: 65%;
}
}
@media (max-width:335px) {
.logo img {
width: 60% ; /*Force IE10 and below to size SVG images correctly*/
max-width: 60%;
}
}
@media (max-width:325px) {
.logo img {
width: 55% ; /*Force IE10 and below to size SVG images correctly*/
max-width: 55%;
}
}
@media (max-width:315px) {
.logo img {
width: 50% ; /*Force IE10 and below to size SVG images correctly*/
max-width: 50%;
}
}
The value in @media (max-width: x) may vary depending on your logo images width, mine is 368px. The percentages may need to be changed as well depending on your logo's size. The first @media query should be your threshold and mine was image width (368px) + collapsed button size (44px) + about 60px and it came out to 480px which is where I start the responsive image scaling.
@media (max-width: x) 中的值可能会因您的徽标图像宽度而异，我的是 368px。根据徽标的大小，百分比可能也需要更改。第一个@media 查询应该是你的阈值，我的是图像宽度（368 像素）+ 折叠按钮大小（44 像素）+ 大约 60 像素，结果是 480 像素，这是我开始响应式图像缩放的地方。
Please be sure to remove my razor syntax from the HTML portions. Let me know if it fixes your problem, it fixed mine.
请务必从 HTML 部分中删除我的 razor 语法。如果它解决了您的问题，请告诉我，它解决了我的问题。
Edit: Sorry, I missed your navbar height issue. There are a couple ways to go about it, personally I compile the Bootstrap LESS with the appropriate navbar height, for my purposes I use 70px, and my image height is 68 px. The second way to do it is in the bootstrap.css file itself, search for ".navbar" and change min-height: to the height of your logo.
编辑：抱歉，我错过了您的导航栏高度问题。有几种方法可以解决这个问题，我个人用适当的导航栏高度编译 Bootstrap LESS，出于我的目的，我使用 70 像素，我的图像高度为 68 像素。第二种方法是在 bootstrap.css 文件本身中，搜索“.navbar”并将 min-height: 更改为徽标的高度。
回答by Kuofp
回答by dustinfarris
I use the img-responsive class and then set a max-width on the aelement. Like this:
我使用 img-responsive 类，然后在a元素上设置最大宽度。像这样：
<nav class="navbar">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="img-responsive" src="mylogo.png">
</a>
</div>
</nav>
and the CSS:
和 CSS：
.navbar-brand {
max-width: 50%;
}
回答by NurlanXp
You must use code as this:
您必须使用以下代码：
<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>
Class of A tag must be "logo" not navbar-brand.
A 类标签必须是“标志”而不是导航栏品牌。
回答by cwohlman
It depends on how tall you want your logo to be.
这取决于您希望徽标的高度。
The default <a>height in the navbar is 20px, so if you specify height: 20pxon your logo, it will allign nicely.
<a>导航height: 20px栏中的默认高度为 20 像素，因此如果您在徽标上指定，它将很好地对齐。
However that's kind of small for a logo, so what I opted for was this:
然而，这对于徽标来说有点小，所以我选择的是：
<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>
This makes the image 30px tall and vertically aligns the image by adding a negative margin to the top (5px is half of the difference between the padding on a and the size of the image).
这使图像高 30 像素，并通过在顶部添加负边距来垂直对齐图像（5 像素是 a 上的填充与图像大小之间差异的一半）。
Alternately you could change the padding on the <a>element, eg:
或者，您可以更改<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>
