导航下拉菜单不起作用，并且导航栏停留在屏幕顶部。 （引导程序4）

Question

我想将导航栏固定在屏幕顶部，但是下拉按钮无法正常工作。但是，如果我删除fixed-top，则该下拉列表有效，但不再停留在屏幕顶部。

我还试图在下拉菜单中的HOME和Account之间放置一个空白行，无法弄清楚如何做到这一点而不破坏下拉菜单。

<nav class="navbar navbar-expand-sm fixed-top">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
  <a class="navbar-brand" href="/testing/"><img class="img-responsive" src="/testing/users/images/logo.png"></a>
   <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav navbar-right links">
     <li class="nav-item"><a href="/testing/"><span class="fa fa-fw fa-home"></span> Home</a></li>
     <li class="nav-item"><a href="/testing/users/account.php"><span class="fa fa-fw fa-user"></span> admin</a></li>
     <li><a href="/testing/users/messages.php"><i class="fa fa-envelope"></i> <span id="msgCount" class="badge" style="margin-top: -5px"></span></a></li>
     <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="dropdown_main" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-fw fa-cogs"></span>  <span class="caret"></span></a>
        <div class="dropdown-menu dropdown-info" aria-labelledby="dropdown_main">
            <a class="dropdown-item" href="/testing/"><span class="fa fa-fw fa-home"></span> Home</a>
            <a class="dropdown-item" href="/testing/users/account.php"><span class="fa fa-fw fa-user"></span> Account</a>
            <a class="dropdown-item" href="/testing/users/admin.php"><span class="fa fa-fw fa-cogs"></span> Admin Dashboard</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=users"><span class="fa fa-fw fa-user"></span> User Management</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=permissions"><span class="fa fa-fw fa-lock"></span> Permissions Management</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=pages"><span class="fa fa-fw fa-wrench"></span> Page Management</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=messages"><span class="fa fa-fw fa-envelope"></span> Messages Manager</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=logs"><span class="fa fa-fw fa-search"></span> System Logs</a>
            <a class="dropdown-item" href="/testing/users/logout.php"><span class="fa fa-fw fa-sign-out"></span> Logout</a>
        </div>
     </li>      
  </ul>
</div>
  <ul class="navbar-nav navbar-right">
     <li class="nav-item dropdown hidden">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuHidden" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</a>
        <div class="dropdown-menu dropdown-info hidden-links" aria-labelledby="navbarDropdownMenuHidden">
        </div>
     </li>
  </ul>

Answer 1

要在下拉菜单中创建分隔线，可以使用<div class="dropdown-divider"></div>，而可以将ul对齐到右侧，可以使用引导程序类ml-auto，而不是fixed-top，可以使用{{ 1}}，因为您的导航栏会在整个页面滚动中保持粘性

sticky-top

.dropdown-divider {
  border-top: 1px solid red!important;
}

li.nav-item {
  padding: 0px 15px
}

@media only screen and (min-width: 767px) {
  ul.navbar-nav {
    padding: 0px 60px
  }
}