javascript - 导航栏下方的 Bootstrap 4 下拉菜单推送弹出窗口

问题描述

我正在使用 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>

标签： javascripthtmlcsstwitter-bootstrapbootstrap-4

/* ============ 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// ============ */

javascript - 导航栏下方的 Bootstrap 4 下拉菜单推送弹出窗口

问题描述

解决方案

推荐阅读