Bootstrap - 如何将徽标添加到导航栏类？

Posted 2023-03-06

【中文标题】Bootstrap - 如何将徽标添加到导航栏类？

【英文标题】：Bootstrap - How to add a logo to navbar class?

【发布时间】：2015-04-06 03:57:51

【问题描述】：

我想在导航栏品牌的顶部导航栏中添加一个徽标。我希望它与视口大小一起缩放，所以我使用 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;

【问题讨论】：

Bootstrap 3 Navbar with Logo的可能重复

【参考方案1】：

我在另一个有效的线程上找到了一个解决方案 - 使用 pull-left 类：

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

在此线程中感谢 Michael：

Bootstrap - How to add a logo to navbar class?

【讨论】：

如何使用这种方法同时使用图像和徽标？当您调整到移动浏览器的大小时，是否可以逐渐减小文本的大小？

pull-left 和 pull-right 不是引导程序中的 css 类，我相信它们是用 font-awesome 添加的

【参考方案2】：

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

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

【参考方案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>

【参考方案4】：

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

【讨论】：

我没有让这些示例与 bootstrap5 一起使用 :)

【参考方案5】：

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

【讨论】：

谢谢桑吉斯！我想将文本用于 SEO 目的。我会尝试找到文本和徽标图像的解决方案。

您可以将图像中的 alt 属性用于 SEO 目的。万事如意

我找到了一个可行的解决方案。

来自：***.com/questions/18474564/… Michael 提供的答案***.com/users/911058/michael 谢谢sanjith！

你将如何使用它来添加图像和文本？

【参考方案6】：

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

【讨论】：

您的回答似乎不包含任何文字。另外，请在您的答案中添加解释。

【参考方案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>