Question

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

看来导航栏品牌中的图片和文字都包装到下一行。

查看此页面

先谢谢你的帮助。

这是我的代码：

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 - How to add a logo to navbar class?

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

对于使用bootstrap 4 beta的用户，您可以在导航栏链接上添加max-width，以便在图像元素上使用img-fluid类控制徽标的大小。

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

Answer 4

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

Answer 5

<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 6

输入图片并提供<div id="map"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBlzZ0CNZ-rHjNp_CI5VFc9QvvitzrOVjk&callback=initMap"></script>然后只需更改导航栏本身的高度即可调整图片大小。在codepen中有一个非常好的例子。 https://codepen.io/bootstrapped/pen/KwYGwq

Answer 7

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

示例：

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

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

7 个答案: