将 Bootstrap 4 下拉菜单的顶部边缘与导航栏的底部边缘对齐答案

【问题标题】：Align top edge of Bootstrap 4 dropdown menu with bottom edge of navbar将 Bootstrap 4 下拉菜单的顶部边缘与导航栏的底部边缘对齐
【发布时间】：2020-03-04 23:26:03
【问题描述】：

我试图让 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;
}

然后根据需要为品牌和每个导航链接添加填充。

【问题讨论】：

您是否尝试将下拉菜单的padding 或margin 设置为0？

标签： html css twitter-bootstrap

【解决方案1】：

您可以使用top 进行调整。

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

【讨论】：

【解决方案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>

【讨论】：