时间戳

首页 > 解决方案 > 导航栏/ Bootstrap 中未出现徽标

html - 导航栏/ Bootstrap 中未出现徽标

问题描述

我目前正在建立一个网站，但无法弄清楚为什么我的徽标没有出现。我在同一个 div 中添加了一个 h1 标签，它显示并在下面显示徽标但是一旦我删除 h1 标签，徽标也会消失吗？我将它添加到这里的演示http://dev.samuelrhys.com/productwave/

谢谢，

<div id="topbar">
  <div class="container">
    <div class="social-links">
      <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
      <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
      <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
      <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
    </div>
  </div>
</div>

<div class="container">

  <div class="logo float-left">
    <h1 class="text-light"><a href="#intro" class="scrollto"><span>Rapidsss</span></a></h1>
    <a href="#header" class="scrollto"><img src="img/logo.svg" alt="logo" class="img-fluid"></a>
  </div>

  <nav class="main-nav float-right d-none d-lg-block">
    <ul>
      <li><a href="#about">About Us</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#team">Team</a></li>
      <li><a href="#footer">Contact Us</a></li>
    </ul>
  </nav><!-- .main-nav -->

</div>

标签： htmlcsstwitter-bootstrap

解决方案

您使用 SVG 作为徽标图像。矢量图像没有固有的高度或宽度。因此，您需要为 IMG 标签提供所需的高度或宽度，并通过浏览器 ( auto) 进行其他维度的锻炼。

HTML

<img src="img/logo.svg" alt="logo" class="img-fluid">

CSS

.img-fluid {
      width: 150px;
      height: auto; //which is default, you don't need to mention that unless you want to override.
}

推荐阅读