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包含一个fixed-top类来解决您的问题。 ;）

Answer 2

您应该给班级定位置，并给这个top：0;

Answer 3

为父级使用绝对位置，并在小屏幕上添加一些CSS以获得良好的设计

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