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

Question

我有一个从官方引导站点上的仪表板示例中获取的固定顶部导航栏。

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

下拉关闭：

下拉菜单打开：

这是我的标题代码：

<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;
}

标签： twitter-bootstrapdrop-down-menubootstrap-4

Answer 1

实际上，在下拉菜单类中添加了左右属性后，我得到了我想要的：

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

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