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>

预期结果：

Expected result

实际结果：

Actual result

更新：

正如我提到的那样，我不想在下拉菜单的顶部添加任何边距，因为在没有为导航栏设置固定高度的情况下，这无法在所有屏幕尺寸上使用，这是不理想的。

我使用以下方法实现了自己想要的：

.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>

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

2 个答案: