导航栏品牌图像重叠的导航项目

问题描述 投票:0回答:1

我下面有导航栏,但是现在,当我在浏览器中打开页面时,ul class="navbar-nav mr-auto"内的项目不会完全显示,因为它们位于导航栏品牌图片的后面。有谁知道该如何解决?

<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;
}
html css twitter-bootstrap
1个回答
0
投票

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

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

通过将img-fluid添加到类img-fluid中,您的图像将适应任何屏幕或布局,并且仅适合其所属位置,请确保图像也不那么大,并从CSS中移除位置。

© www.soinside.com 2019 - 2024. All rights reserved.