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">

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

我已经尝试过在堆栈溢出此处的一些答案之后添加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 ––>

使用比导航栏高的图像

1 个答案: