Bootstrap - 如何在navbar类中添加徽标？

Question

我想在导航栏品牌的顶部导航栏中添加一个徽标.我希望它与视口大小一起缩放,所以我使用的是img-responsive2类.

似乎navbar-brand中的图像和文本都包含在下一行中.

此页面可在http://digitalponddesign.com/dev/上查看

在此先感谢您的帮助.

这是我的代码:

HTML

   <h2 class="navbar-brand brand-name">
       <a href="index.html"><img class="img-responsive2"       
       src="images/DigitalPondlogo.png">DigitalPond</a>
   </h2>

CSS

.navbar {
margin: 10px 0;

}
.navbar-default {
background-color: #fff;
border-color: #fff;
}
.brand-name {
font-family: 'Josefin Slab', serif;
font-size: 47px;
font-weight: bold;
color: #444;
text-decoration: none;
}

.nav-container {
padding-top: 8px;
}

.navbar-custom {
font-size: 20px;
background-color: #FFF;

}

Answer 1

我在另一个有效的线程上找到了一个解决方案 - 使用左拉类:

 <a href="#" class="pull-left"><img src="/path/to/image.png"></a> 

感谢迈克尔在这个帖子中:

Bootstrap - 如何在navbar类中添加徽标？

Answer 2

您可以将文本和图像都显示为内联块，这样它们就不会堆叠。使用像左拉/右拉这样的浮动可能会导致不良问题，因此应谨慎使用

<a class="navbar-brand" href="#">
  <img src="mylogo.png" style="display: inline-block;">
  <span style="display: inline-block;">My Company</span>
</a>

Answer 3

我建议您使用图像或文本。因此，删除文本并将其添加到图像中（也许使用 Photoshop）。然后，将图像的宽度和高度设置为 100%。它会成功的。因为图像可以根据容器调整大小。但是，您必须手动调整文本大小。如果你能提供小提琴，我可以帮助你实现这一目标。