Bootstrap 4-контактный верхний элемент панели навигации

Question

Я использую навигационную панель bootstrap 4.1 здесь. Я хочу, чтобы мой div "#pin_to_top" всегда был в верхней части панели навигации. Так что на более широких экранах это

Логотип - Меню - "#pin_to_top" (все в одной строке)

и на небольших устройствах это похоже на

Логотип - "# pin_to_top #

Меню (меню под моим логотипом и div)

Также был бы очень полезен любой другой совет относительно моего кода :)

.navbar-brand img {
    height: 2rem;
}

.phonecall {
    border-radius: 2rem;
    background-color: #28a745;
    font-weight: bold;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light d-flex flex-column flex-md-row navbar-expand">
    <a class="navbar-brand" href="#">
        <p>LOGO</p>
    </a>
    <div class="d-flex">
        <ul class="navbar-nav flex-fill pl-md-5 text-nowrap">
            <li class="nav-item "><a class="nav-link" href="#">Menu1</a></li>
            <li class="nav-item "><a class="nav-link" href="#">Menu2</a></li>
            <li class="nav-item "><a class="nav-link" href="#">Menu3</a></li>
            <li class="nav-item "><a class="nav-link" href="#">Menu4</a></li>
        </ul>
    </div>
    <div id="pin_to_top" class="ml-auto d-flex flex-column flex-md-row align-self-start" >
        <div class="p-2">
            <a class="">Some info here</a>
        </div>
        <div class="navbar-text text-nowrap phonecall px-2">
            <a class="text-white" href="tel:+78005553535">+7-(800)-555-35-35</a>
        </div>
    </div>
</nav>

Answer 1

Bootstrap 4 включает в себя класс a fixed-top для решения вашей проблемы. ;)

Answer 2

используйте абсолютную позицию для родителя и добавьте немного CSS для хорошего дизайна на маленьком экране

@include media-breakpoint-up(md) { 
div#pin_to_top {
    position: absolute;
    left: auto;
    right: 0px;
}
}

Answer 3

Вы должны дать определение местоположения своему классу и дать этот топ: 0;