![](/img/trans.png)
[英]I am having trouble lining up a dropdown menu with the correct column grid using bootstrap 3.3.7
[英]Having trouble with Bootstrap 4 dropdown menu
出於某種原因,我的下拉菜單在 bootstrap4 中沒有 function。 我有 jquery,引導程序,我不完全確定 popper 是否正確導入。 想知道是否有人可以指出我是否做錯了什么。
<!DOCTYPE html>
<html>
<head>
<title>Learning BootStrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"> </script>
</head>
<body>
<p class="lead text-center">This is my website.</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu</button/>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">first link</a>
<a href="#" class="dropdown-item">second link</a>
<a href="#" class="dropdown-item">third link</a>
</div>
</div>
</body>
</html>
交換 bootstrap 和 popper.js 腳本標簽的順序,因此 bootstrap 是最后加載的。
您下載的版本可能是縮小版。 我這樣說是因為它指的是js/bootstrap.min.js
之類的東西。
您必須在stackpath link
的幫助下包含jquery
和popper
,它們在bootstrap
下載版本中不可用。 下面是您應該使用的代碼,以使該下拉菜單可用!
<!DOCTYPE html>
<html>
<head>
<title>Learning BootStrap</title>
<!-- ----------------------------Link you have to include before your css and js file -->
<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>
<!-- ----------------------------Your File -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<p class="lead text-center">This is my website.</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">first link</a>
<a href="#" class="dropdown-item">second link</a>
<a href="#" class="dropdown-item">third link</a>
</div>
</div>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.