Bootstrap 4 下拉菜单在导航栏下方弹出

Question

我正在使用 Bootstrap 4 并实现了一个带有下拉菜单的导航栏。 但是，我希望在导航栏下方有下拉菜单，而不是在下拉链接下方的某处。 因此，我已将属性top从100%更改为自定义值，以便将下拉菜单进一步向下推（将其与导航栏的末端对齐 - 因此，就在导航栏下方）。 也许你们有更好的解决方案来做到这一点，而不是输入自定义值。

由于此更改，每次我想使用课程器从菜单链接滑动到下拉菜单时，我的菜单都会消失，因为我的菜单仅在悬停时显示而不是在单击时显示！ 它正在消失，因为您可以在这两个图像中看到鼠标不再位于下拉菜单中。 对于如何解决这个问题，有任何的建议吗？

到目前为止我的导航栏（为了看到问题，你必须看到桌面版本！ ）：

 .navbar-brand p { width: auto; max-width: 170px; height: 47px; } .navbar { padding: .25rem 1rem; } .nav-item { padding: 0px 10px; } .navbar .nav-item:first-child { padding-left: 0px; } .nav-item:last-child { padding-right: 0px; } .burger-menu { justify-content: right; } .dropdown-menu { left: unset !important; min-width: 300px !important; top: 3.1rem !important; } .dropdown:hover > .dropdown-menu { display: block; } .dropdown > .dropdown-toggle:active { pointer-events: none; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-lg navbar-light bg-white"> <div class="container"> <div class="d-flex flex-grow-1"> <span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span> <a class="navbar-brand" href="#"> <p>My Image</p> </a> <div class="w-100 d-flex burger-menu"> <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#myNavbar7" aria-expanded="false"> <span class="navbar-toggler-icon"></span> </button> </div> </div> <div class="navbar-collapse flex-grow-1 collapse" id="myNavbar7" style=""> <ul class="navbar-nav ml-auto flex-nowrap"> <li class="nav-item"> <a href="#" class="nav-link">Link1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link2</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link3</a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Menu</a> <div class="dropdown-menu"> <div class="row"> <div class="col-xl-12"> <a href="" class="nav-link">All Categories</a> </div> <div class="col-xl-6"> <a href="#" class="dropdown-item">link</a> <a href="#" class="dropdown-item">link</a> <a href="#" class="dropdown-item">link</a> <a href="#" class="dropdown-item">link</a> </div> <div class="col-xl-6"> <a href="#" class="dropdown-item">link</a> <a href="#" class="dropdown-item">link</a> <a href="#" class="dropdown-item">link</a> <a href="#" class="dropdown-item">link</a> </div> </div> </div> </li> <li class="nav-item"> <form> <div class="input-group"> <input type="text" class="form-control border border-right-0" placeholder="Search..."> <span class="input-group-append"> <button class="btn btn-outline-dark border border-left-0" type="button"> <i class="fa fa-search"></i> </button> </span> </div> </form> </li> <li class="nav-item"> <a href="#" class="btn btn-secondary">Login</a> </li> <li class="nav-item"> <a href="#" class="btn btn-primary">Register</a> </li> </ul> </div> </div> </nav>

Answer 1

这是js方式：

https://codepen.io/shahry4r/pen/eYmzErm

如果不想使用 js，则必须将 dd 放在菜单链接的末尾：

.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: -10px;
}

如果可以的话，将一些自定义类添加到下拉列表中，然后覆盖该类

这是菜单区域结束的下拉菜单，下拉菜单悬停出现

Answer 2

您必须从 .navbar 中删除 padding 并从 .dropdown-menu 中删除 margin-top 但是如果您尝试制作悬停效果，请仅针对桌面大小执行此操作。 像这样使用媒体查询

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
    .navbar .nav-item .dropdown-menu{ display: none; }
    .navbar .nav-item:hover .nav-link{ color: #fff;  }
    .navbar .nav-item:hover .dropdown-menu{ display: block; }
    .navbar .nav-item .dropdown-menu{ margin-top:0; }
}   
/* ============ desktop view .end// ============ */

这里是关于引导程序导航栏的详细教程： https ://bootstrap-menu.com/detail-basic-hover.html