sass - 下拉菜单不适用于带有 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
解决方案
.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;
}
推荐阅读
- spring - Spring Batch - 引起:org.hibernate.hql.internal.ast.QuerySyntaxException:未映射
- recursion - Prolog 中的递归问题 - 退出递归时得到 False 而不是 True
- c# - EF Core 3.1 在定义实体之间的主键关系时创建名称为“1”的重复列
- google-cloud-platform - 在 GCE 中将文件从区域存储桶移动到多区域存储桶
- facebook-login - java.lang.ClassCastException: android.app.ApplicationPackageManager$ResourceName
- java - 从字符串 s 打印给定大小 k 的字典最小和最大子字符串
- spring-boot - 在 application.yml 的属性中找不到键 [http-client.timers['http-get'].name] 的属性
- git - 无法忽略 git 存储库中的日志文件
- python - 如何遍历 AutoCAD 图形的实体?
- angular - Angular 材质 UI 连续显示选项卡内容