下拉不工作Bootstrap 4 [英] Dropdown dont work Bootstrap 4
本文介绍了下拉不工作Bootstrap 4的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我也使用Thymeleaf模板引擎。
我在我的html页面中导入了popper.js和jQuery。此外，我还在我的项目中将Bootstraps的Css和Javascript包含在静态direcotory中作为单独的文件
<！ - jQuery library - >
< script src =https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script>
<！ - Popper JS - >
< script src =https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js>< / script>
它仍然不起作用。
这里是我的html页面的完整代码
< ;! DOCTYPE html>< html lang =enxmlns：th =http://www.thymeleaf.org>< head> < meta charset =UTF-8> <标题>页脚< /标题> <！ - jQuery库 - > < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script> <！ - Popper JS - > < script src =https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js>< / script>< / head><体> < div th：fragment =footer> < DIV> < a th：href =@ {/ notebook / add}class =btn btn-outline-primaryrole =button>添加注释< / a> < / DIV> < div class =dropdown> < button class =btn btn-outline-primary dropdown-toggletype =buttondata-toggle =dropdown> Sort< / button> < div class =dropdown-menu> < a class =dropdown-itemth：href =@ {/ notebook / sort（method ='Date_ASC'）}>日期升序< / a> < a class =dropdown-itemth：href =@ {/ notebook / sort（method ='Date_DESC'）}>日期降序< / a> < a class =dropdown-itemth：href =@ {/ notebook / sort（method ='Done'）}>完成< / a> < a class =dropdown-itemth：href =@ {/ notebook / sort（method ='Not_Done'）}>未完成< / a> < / DIV> < / DIV> < / div>< / body>< / html>
h2_lin>解决方案
要使下拉工作，您必须加载以下3个JavaScript文件
并将它们加载那个特定的顺序（首先是jQuery，然后是popper.js，然后是bootstrap.js）：
< script src =https://code.jquery.com/jquery-3.2.1.slim.min.jsintegrity =sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr / rE9 / Qpg6aAZGJwFDMVNA / GpGFF93hXpG5KkNcrossorigin =anonymous>< / script>
< script src =https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.jsintegrity =sha384-ApNbgh9B + Y1QKtv3Rn7W3mgPxhU9K / ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q crossorigin =anonymous>< / script>
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.jsintegrity =sha384 -JZR6Spejh4U02d8jOt6vLEHfe / JQGiRRSQQxSfFWpi1MquVdAyjUar5 + 76PVCmYlcrossorigin =anonymous >< /脚本>
So I want to make a dropdown using Bootstrap 4 for my Spring MVC Aplication. I'm also using Thymeleaf template engine. I 'imported' popper.js and jQuery in my html page.Also I have included Bootstraps's Css and Javascript to static direcotory as separate files in my project
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
And it's still not working. Here the full code of my html page
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Footer</title>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
</head>
<body>
<div th:fragment="footer">
<div>
<a th:href="@{/notebook/add}" class="btn btn-outline-primary" role="button">Add Note</a>
</div>
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort</button>
<div class="dropdown-menu">
<a class="dropdown-item" th:href="@{/notebook/sort(method='Date_ASC')}">Date Ascending</a>
<a class="dropdown-item" th:href="@{/notebook/sort(method='Date_DESC')}">Date Descending</a>
<a class="dropdown-item" th:href="@{/notebook/sort(method='Done')}">Done</a>
<a class="dropdown-item" th:href="@{/notebook/sort(method='Not_Done')}">Not Done</a>
</div>
</div>
</div>
</body>
</html>
解决方案
For the drop-down to work, you must load the following 3 JavaScript files
and load them in that particular order (first jQuery, then popper.js and then bootstrap.js):
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
这篇关于下拉不工作Bootstrap 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
