Bootstrap - 如何将徽标添加到navbar类？

Question

我想在navbar品牌的顶部导航栏中添加一个徽标。我希望它可以用视口大小进行缩放，因此我使用img-responsive2类。

似乎navbar品牌的图像和文本都包装到下一行。

此页面可以提前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

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

Answer 2

我发现，工程另一个线程的解决方案 - 使用拉左类：

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

感谢Michael在这个线程：

Bootstrap - How to add a logo to navbar class?

Answer 3

你可以只显示文本和图像都是内联块，以便它们不堆叠。使用像拉左/右拉花车可能造成意想不到的问题，所以他们应谨慎

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

Answer 4

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

用于包括文本：

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

Answer 5

对于使用引导4测试版，你可以将这些在您的导航栏链接上添加最大宽度，以便在图像元素上使用img-fluid类来控制徽标的大小。

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

Answer 6

输入图像并给height:100%;width:auto然后只需更改导航栏本身的高度来调整图像大小。 codepen中有一个非常好的例子。 https://codepen.io/bootstrapped/pen/KwYGwq