Twitter bootstrap 引导-如何向navbar类添加徽标？

我想在navbar品牌的顶部navbar添加一个徽标。我希望它能随视口大小缩放，所以我使用img-responsive2类

navbar品牌中的图像和文本似乎都在换行到下一行

此页面可在以下位置查看：

提前谢谢你的帮助

这是我的密码：

Html

---

我建议您使用图像或文本。因此，删除文本并将其添加到图像中（可能使用Photoshop）。

---

然后，对图像使用100%的宽度和高度。它会成功的。因为可以根据容器调整图像的大小。但是，您必须手动调整文本大小。如果您可以提供小提琴，我可以帮助您实现这一点。

我在另一个线程上找到了一个可行的解决方案-使用左拉类：

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

感谢Michael在这篇文章中：

---

您可以将文本和图像显示为内联块，这样它们就不会堆叠。使用诸如“向左拉”/“向右拉”之类的浮动可能会导致不希望出现的问题，因此应谨慎使用

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

对于包含文本：

<a class="navbar-brand" href="#" style="padding:0px;">
  <img src="mylogo.png" style="height:100%;display:inline-block;"><span>text</span>
</a>

---

对于那些使用bootstrap 4 beta版的用户，您可以在导航栏链接上添加最大宽度，以便使用图像元素上的img fluid class控制徽标的大小

 <a class="navbar-brand" href="#" style="max-width: 30%;">
    <img src="images/logo.png" class="img-fluid">
 </a>

输入图像并给出高度：100%；宽度：auto然后只需更改导航栏本身的高度即可调整图像大小。codepen中有一个非常好的例子

使用图像样式宽度和高度100%。这样就可以了，因为可以根据容器调整图像的大小

例如：

<a class="navbar-brand" href="#" style="padding: 4px;margin:auto"> <img src="images/logo.png" style="height:100%;width: auto;" title="mycompanylogo"></a>

Thank Sanjith可能重复！我想使用搜索引擎优化的目的文本。我将尝试找到一个文本和标志图像解决方案。你可以使用图像中的alt属性进行搜索引擎优化。尽管如此，我还是找到了一个有效的解决方案。发件人：答案由Michael提供谢谢sanjith！如何使用它添加图像和文本？如何使用这种方法同时使用图像和徽标？当你调整到移动浏览器时，你能逐渐减小文本的大小吗？

向左拉

和

向右拉

不是bootstrap中的css类，我相信它们添加了字体awesome。你的答案似乎不包含任何文本。另外，请在回答中添加解释。

<a class="navbar-brand" href="#" style="padding:0px;">
  <img src="mylogo.png" style="height:100%;display:inline-block;"><span>text</span>
</a>

 <a class="navbar-brand" href="#" style="max-width: 30%;">
    <img src="images/logo.png" class="img-fluid">
 </a>

<a class="navbar-brand" href="#" style="padding: 4px;margin:auto"> <img src="images/logo.png" style="height:100%;width: auto;" title="mycompanylogo"></a>