Bootstrap下拉菜单扩展了固定顶部导航栏的高度

Question

我在官方引导网站的dashboard example上有一个固定顶部的导航栏。

我在导航栏上添加了两个下拉菜单，但是，当导航栏展开时，它会在导航栏内部而不是顶部打开。

下拉菜单已关闭：

下拉菜单已打开：

这是我的标头代码：

<header>
    <nav class="navbar navbar-dark fixed-top d-flex p-0 shadow">
   <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="/">Test</a>
   <ul class="navbar-nav d-flex flex-row px-3 ml-auto">
     <li class="nav-item text-nowrap px-3">
         <a class="nav-link active" href="/reports/individual/users">Reports</a>
     </li>
     <li class="nav-item text-nowrap px-3">
         <a class="nav-link " href="/settings">Settings</a>
     </li>
     <li class="nav-item text-nowrap px-3">
         <a class="nav-link" href="#">Help</a>
     </li>
     <li class="nav-item text-nowrap px-3 dropdown">
        <a class="nav-link" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i data-feather="bell"></i> <span class="badge badge-light px-2">3</span>
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Notification one</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Notification two</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Notification three</a>
        </div></li>
        <li class="nav-item text-nowrap px-3 dropdown">
           <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             User
           </a>
           <div class="dropdown-menu" aria-labelledby="navbarDropdown">
             <a class="dropdown-item" href="#">Your profile</a>
             <a class="dropdown-item" href="#">Sign out</a>
           </div></li>
   </ul>
</nav>
  </header>

我尝试添加以下CSS，使下拉菜单如我所愿地在导航栏顶部打开，但是它会导致其他问题，例如下拉菜单超出右侧屏幕，因此我正在寻找更多优雅的解决方案。

.navbar .dropdown-menu {
position: absolute;
}

Answer 1

实际上，在向下拉菜单类添加了right和left属性之后，我得到的正是我想要的：

.navbar .dropdown-menu {
  position: absolute;
  right: 0;
  left: auto;
}

这是一个好的解决方案吗？