將 Bootstrap 4 下拉菜單的上邊緣與導航欄的下邊緣對齊

Question

我正在嘗試讓 Bootstrap 4 導航欄下拉菜單直接顯示在導航欄下方，但默認情況下它顯示在導航欄底部邊緣的上方。

有沒有辦法在不為導航欄設置固定高度並在下拉菜單上使用 margin-top 的情況下實現這一點？

如果我沒記錯的話，Bootstrap 3 中的默認設置是將下拉菜單的頂部邊緣與導航欄的底部邊緣對齊。 這似乎在 BS 4 中發生了變化。

這是我的 HTML：

  <div class="navbar navbar-expand-lg flex-row shadow">
     <ul class="navbar-nav navbar-desktop flex-row ml-auto d-none d-lg-inline-flex">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navSearchDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fas fa-search"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navSearchDropdown">
                <div class="px-2">
                    <?php get_search_form(); ?>
                </div>
            </div>
        </li>
     </ul>
  </div>

預期結果：

實際結果：

更新：

正如我所提到的，我不想在下拉菜單的頂部添加任何邊距，因為如果不為導航欄設置固定高度，這將不適用於所有屏幕尺寸，這並不理想。

我使用以下方法實現了我想要的：

.navbar {
    padding: 0;
}
.navbar .container {
    align-items: stretch;
}

然后根據需要為品牌和每個導航鏈接添加填充。

Answer 1

您可以使用top進行調整。

.dropdown-menu {
    position: absolute;
    top: 59px;
}

Answer 2

您可以為下拉菜單添加邊距。 你必須給出重要的因為下拉菜單有它的默認邊距：

 .dropdown-menu { margin: 8px 0px;important; }

 <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light "> <a class="navbar-brand mr-0" href="#">Brand</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown"> <ul class="navbar-nav mx-auto text-md-center "> <li class="nav-item active"> <a class="nav-link" href="#">Item1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Item2</a> </li> <li class="nav-item dropdown flex-row justify-content-md-center justify-content-start flex-nowrap"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown"> Dropdown </a> <div class="dropdown-menu "> <a class="dropdown-item" href="#">dropdown item 1</a> <a class="dropdown-item" href="#">dropdown item 2</a> <a class="dropdown-item" href="#">dropdown item 3</a> </div> </li> </ul> </div> </nav>