首页 > 解决方案 > 下拉菜单不适用于带有 sass 的 bootstrap4

问题描述

我已经为 bootstrap4 编写了以下代码,但是切换功能不起作用

<li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Template</a>
                                <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                </div>
  </li>

我也包含了popper.js,但它没有成功

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>

实际上我不想使用 popper js,因为我想将此框架导入 vue 否则会有冲突

can anyone letme know any help would be appreciated

标签: sassbootstrap-4navbardropdown

解决方案


.dropdown {
 &:hover{
 .dropdown-menu-mn{
   @extend .dropdown-menu;
     display: block;
     opacity: 1;
     overflow: visible;
   }
   }
  }
  .dropdown-menu-mn{
  @extend .dropdown-menu;
  display: none;
  opacity: 0;
  overflow: hidden;
  }

推荐阅读