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