使用高于导航栏的图像

Question

我在一个项目中有这个导航栏：

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">
    <img th:src="@{/img/bootstrap-solid.svg}" width="30" height="30" class="d-inline-block align-top" alt="">
    Kleber App Store
  </a>
</nav>

而不是这个：

    <img th:src="@{/img/bootstrap-solid.svg}" width="30" height="30" class="d-inline-block align-top" alt="">
    Kleber App Store

我想要这样的东西：

    <img th:src="@{/img/bootstrap-solid.svg}" width="120" height="240" class="d-inline-block align-top" alt="Kleber App Store">

但不改变导航栏的高度（图像应在开始时与导航栏重叠，并留出下方区域，如级联）。

我已经尝试在 stackoverflow 上按照一些答案添加 style="position: absolute;"，但是使用此解决方案，图像显示时与顶部有一点差距，在导航栏下方区域的 list-group 后面。

有人知道怎么解决吗？

Answer 1

问题不在于图像，而在于navbar 引导类。 navbar 类具有 height: auto;。这就是为什么它会随着里面的内容而增加它的大小。

您可以尝试自定义导航栏高度

.navbar {
  height: 3rem;
}

或

img {
  position: absolute;
}

与

<span class="pl-3">Brand Name</span> <! –– padding-left or whatever required ––>