时间戳

首页 > 解决方案 > 如何在不损坏图像的情况下将图像添加到 Bootstrap navbar-brand？

html - 如何在不损坏图像的情况下将图像添加到 Bootstrap navbar-brand？

问题描述

我似乎找不到让我的图像出现在导航栏中的方法。关于是否应该添加 div 标签或额外类的任何提示？在 CSS 方面我应该怎么做？我是 Bootstrap 的新手，谢谢！

<nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
    <div class="container-fluid">
      <a class="navbar-brand js-scroll" href="#page-top" >
        <img src="img/Signature2.png" id="brand-image" class="img-fluid"/>
      </a>
      <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarDefault" aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span></span>
        <span></span>
        <span></span>
      </button>
      <div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link js-scroll active" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#work">Projects</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#blog">Art</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

标签： htmlcssbootstrap-4

解决方案

我复制了您的代码并将其替换为另一个图像（因为我无法访问您的）并且它可以工作。所以问题可能出在你提供的路径上。

img 文件夹是否与您链接的 html 处于同一级别？您确定您正确命名了文件夹和图像吗？

推荐阅读