Question

我目前正在建立一个网站，无法弄清楚为什么我的徽标没有出现。我在同一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>

Answer 1

您正在使用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.
}

徽标未出现在导航栏/ Bootstrap中

1 个答案: