如何用twitter bootstrap导航栏上的图像替换品牌文字？

Question

我尝试用图片替换品牌文字，就像我在示例索引页面中看到的那样。但是，这会导致导航分为两行，徽标图像位于其自己的行上。我怎样才能解决这个问题？这是显示问题的页面：

http://www.clearsoftinc.com/Clearsoft/public_html/index.html

这是显示它应该是什么样子的页面（在我将文本徽标更改为图形徽标之前）。

http://www.clearsoftinc.com/Clearsoft/public_html/about.html

Answer 1

工作示例：

http://jsfiddle.net/N2nGQ/

我只是用这个：

<a class="navbar-brand" href="#"><img src="http://www.clearsoftinc.com/Clearsoft/public_html/img/new_logo_white.png" style="width: 50px; height: 20px;" /></a>

要在您的网站上使用此功能，您必须将'navbar-brand'添加到标记。

Answer 2

我认为这导致了这个问题。

<img src="img/new_logo_white.png" width="15%" alt="Clearsoft Home">

width属性导致它扩展得比它应该多。删除它并使用CSS宽度，你应该很高兴。

.logo{
  width: 95px;
  margin-top: 15px;
}

Answer 3

请勿在图片上使用width="%15"。相反，将图像大小调整为您想要的大小并使用较小的图像（在您的情况下，它将是112 x 25）。包裹<div class="navbar-header">为744像素宽的图片腾出空间，但随后在<img>标记上将其缩小到原始大小的15％。

请参阅此屏幕截图：http://imgur.com/f2xkO1f

另外，这只是个坏主意，因为该网站仍然需要请求并下载大文件然后调整大小。如果您自己制作较小的图像并引用较小尺寸的图像，它会使您的网站更快。