Bootstrap 3 Navbar带有标志 [英] Bootstrap 3 Navbar with Logo

问题描述

我想使用Bootstrap 3默认导航栏中的图片标志，而不是文字品牌。什么是正确的方式这样做，而不会导致任何问题与不同的屏幕尺寸？我假设这是一个常见的要求，但我还没有看到一个好的代码示例。

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.

我试着只是将一个IMG标签放在具有导航栏的A标签内。 -brand类，但是导致菜单不能在我的Android手机上正常工作。我也尝试增加navbar类的高度，但是更麻烦的事情。

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.

顺便说一句，我的标志图像大于导航栏的高度。

By the way, my logo image is larger than the height of the navbar.

推荐答案

为什么每个人都努力做到这一点？当然，这些方法中的一些将工作，但是它们比必要的更复杂。

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.

好的，首先 - 您需要一个适合您的导航栏的图像。您可以通过css height属性（允许缩放宽度）调整图像，或者您可以使用适当大小的图像。

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.

由于某种原因，每个人都希望将图像粘贴到锚点中navbar品牌，这是没有必要的。 navbar-brand应用图像不必要的文本样式，以及导航栏左侧类（就像拉左，但用于导航条）。您真正需要的是添加navbar-left。

For some reason, everyone wants to stick the image inside of an anchor with navbar-brand, and this isn't necessary. "navbar-brand" applies text styles that aren't necessary to an image, as well as the navbar-left class (just like pull-left, but for use in a navbar). All you really need is to add 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.

这篇关于Bootstrap 3 Navbar带有标志的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！