我下面有导航栏,但是现在,当我在浏览器中打开页面时,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;
}
您可以修改类,也不需要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中移除位置。