时间戳

首页 > 解决方案 > navbar-brand 图像重叠 nav-items

html - navbar-brand 图像重叠 nav-items

问题描述

我有下面的导航栏，但是现在，当我在浏览器上打开页面时，里面的项目ul class="navbar-nav mr-auto"并没有完全显示出来，因为它们被放置在 navbar-brand 图像的后面。任何人都知道如何解决这个问题？

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
  <a class="navbar-brand pr-3" href="#">
    <img th:src="@{/img/banner.jpg}" class="d-inline-block align-top pl-3" alt="Kleber App Store">
  </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse pl-3" id="navbar">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

此页面的 css

body {
  min-height: 75rem;
  padding-top: 4.5rem;
}

.navbar-brand img {
  top: 0;
  position: absolute;
}

标签： htmlcsstwitter-bootstrap

解决方案

您可以修改类，并且您的 CSS 文件中也不需要绝对位置。此操作会将您的图像调整为您的布局，相信您正在使用引导程序，我也删除了您的 th:src，因为它也不是必需的，请检查下面的代码。

<img src="@{/img/banner.jpg}" class="d-inline-block align-top pl-3 img-fluid" alt="Kleber App Store">

通过添加到您的类 img-fluid，您的图像将调整到任何屏幕或布局并仅适合它所属的位置，确保图像不是那么大并从 CSS 中删除位置。

推荐阅读