带有徽标的 Bootstrap 3 导航栏 [英] 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 标签中，但这导致菜单无法在我的 Android 手机上正常运行.我还尝试增加导航栏类的高度，但这更糟.

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 高度属性(允许宽度缩放)调整您的图像，或者您可以只使用适当大小的图像.无论您决定做什么 - 它的外观取决于您的图像大小.

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-brand 的锚点内，而这没有必要.navbar-brand 应用图像不需要的文本样式，以及 navbar-left 类(就像 pull-left，但用于导航栏).您真正需要的只是添加 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 导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！