Использование изображения выше, чем панель навигации - PullRequest
Новая
       4

Использование изображения выше, чем панель навигации

0 голосов
/ 03 апреля 2020

У меня есть этот navbar в проекте: 

<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;" после некоторых ответов здесь на stackoverflow, но с этим решением изображение отображается с небольшим зазором сверху и за list-group в области ниже панели навигации.

Кто-нибудь знает, как это исправить?

1 Ответ

0 голосов
/ 03 апреля 2020

Проблема не с изображением, а с классом navbar bootstrap. Класс navbar имеет height: auto;. Вот почему он увеличивает свой размер с содержимым внутри него.

Вы можете попробовать настроить высоту панели навигации на 

.navbar {
  height: 3rem;
}

ИЛИ 

img {
  position: absolute;
}

с помощью 

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