将Bootstrap 4导航栏链接对齐到底部

Question

I want bootstrap 4.1 navbar links to be vertically aligned to bottom of the navbar.  The links are currently aligned centered vertically. I have given height of 150px to navbar and given padding of 100px to the navbar-nav and I am able to get them at the bottom but its look distorts when the navbar collapses. Here is the fiddle :

https://jsfiddle.net/ctk60df7/1/

Please help me

Answer 1

您将要使用媒体查询，以便仅在导航栏折叠为“移动”垂直模式之前应用150px的高度。对于navbar-expand-lg，导航栏会以992px的高度折叠，因此媒体查询为：

@media (min-width:992px) {
  .navbar {
    height: 150px;
  }
}

然后使用align-items-end在底部对齐导航链接。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark align-items-end">
    <div class="container">
    </div>
</nav>

https://www.codeply.com/go/VyB9zsXLCJ