css - 带徽标的Bootstrap 3 Navbar(Bootstrap 3 Navbar with Logo)

Question

I want to use the Bootstrap 3 default navbar with an image logo instead of text branding.

(我想使用带有图像徽标而不是文本标记的Bootstrap 3默认导航栏。)

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.

(除了在所有屏幕尺寸上具有可接受的显示之外的关键要求是较小屏幕上的菜单可折叠性。)

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.

(我试过把一个IMG标签放在带有navbar-brand类的A标签内，但这导致菜单在我的Android手机上无法正常运行。)

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.

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

  ask by stepanian translate from so

Answer 1

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.

(您可以通过css height属性调整图像（允许宽度比例），也可以使用尺寸合适的图像。)

Whatever you decide to do - the way this looks will depend on how well you size your image.

(无论你决定做什么 - 它的外观取决于你的图像大小。)

For some reason, everyone wants to stick the image inside of an anchor with navbar-brand , and this isn't necessary.

(出于某种原因，每个人都希望用navbar-brand将图像粘贴在锚点内，这不是必需的。)

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).

(navbar-brand应用图像不需要的文本样式，以及navbar-left类（就像navbar-left ，但用于导航栏）。)

All you really need is to add 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.

(您甚至可以使用导航栏品牌项目进行操作，该项目将显示在图像的右侧。)