Bootstrap 4.1 плавающий логотип между

Question

Я создал плавающий логотип в навигации Bootstrap 4, но, к сожалению, он ломает «кнопку навигационной кнопки-переключателя», он может быть выровнен по правому краю справа, но на маленьких экранах он появляется под логотипом с правой стороны..

Вот код, который я пробовал:

.navbar-brand {
  position: absolute;
  padding-top: 100px;
}

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand abs" href="#"><img src="assets/img/logo.png" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbar1">
            <ul class="navbar-nav text-right">
                <li class="nav-item active">
                    <a class="nav-link" href="#">lorem<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">lorem</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Ipsum</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">lorem</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

Когда вы присваиваете position: absolute элементу

Элемент удаляется из обычного потока документа, не создавая места для элемента в контуре страницы.Он расположен относительно своего ближайшего предка, если таковой имеется;в противном случае он расположен относительно начального блока контейнера.Его окончательная позиция определяется значениями сверху, справа, снизу и слева.Это значение создает новый контекст стека, когда значение z-index не равно auto.Абсолютно позиционированные элементы могут иметь поле и не сворачиваться с любым другим полем.

, поэтому при установке .navbar-brand {position: absolute;} он удаляет обычный поток документа, а navbar-toggler является «единственным»ребенок .container с display: flex; и justify-content: space-between; (вот почему navbar-toggler справа, когда у вас есть другой ребенок внутри .container).

, чтобы избежать фактического поведения, которое вы можете сделатьМногое зависит от того, что вы ожидаете.попробуйте удалить position: absolute из бренда, добавив больше элементов в навигационную панель, чтобы переключиться вправо, в любом случае решение зависит от того, чего вы хотите достичь.

Надеюсь, я дал вам идею