使用 bootstrap 5 cdn 时 Jquery 包含的菜单未显示在 html 页面上
Posted
技术标签:
【中文标题】使用 bootstrap 5 cdn 时 Jquery 包含的菜单未显示在 html 页面上【英文标题】：Jquery included menu not displayed on html page when using bootstrap 5 cdn 【发布时间】：2021-08-31 19:47:50 【问题描述】：我正在通过修改现有的 html 来试用 bootstrap 5，其中包括由 jquery 添加的菜单。当我使用 bootstrap 3 cdn 时显示菜单，当我使用 bootstrap 5 cdn 时不显示菜单。
这是 bootstrap 5 的错误还是我在代码中做错了什么？
jquery 是：
$(document).ready(function()
//Include the menu before the document is ready.
$("#includedContent").load("Menu.html", function()
//Do not allow these items to be selected when a youth member is not displayed
$(document).on("click", ".dropdown-menu li.disabled a", function()
return false;
);
);
);
html 是：
<div id="accountUpdate" class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">
<div id="includedContent"></div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-warning">
引导 3 cdn：
引导 5 CDN：
这是代码（删减）：
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Edit Awards</title>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<meta name="application-name" content="Award Tracking Application" />
<meta name="author" content="Glyndwr (Wirrin) Bartlett" />
<meta name="description" content="A Scout award tracking application" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- Validate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<!-- Bootstrap -->
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
<!-- Bootstrap Date Picker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<!-- Text Editor -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script><!-- 0.8.9 -->
<!-- Le styles -->
<!-- Bootstrap -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" />
<!-- Confirm -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
<!-- Text Editor -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">
<style type="text/css">
body
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
.form-select
max-width: 100%;
padding: 19px 29px 29px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
.form-signin .form-heading,
.form-signin .checkbox
margin-bottom: 10px;
.form-signin input[type="text"],
.form-signin input[type="password"]
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
.myheader
display:flex;
text-align: center;
.myimg
width: 130px;
height: auto;
.pull-right
text-align: right;
/* Tooltip container */
/* Tooltip text */
.tooltiptext
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 1s;
/* Tooltip arrow */
.tooltiptext::after
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
/* Show the tooltip text when you mouse over the tooltip container */
.tooltiptext
visibility: visible;
opacity: 1;
/* Change the padding */
.padding-1
padding-right:1;
padding-left:1;
.req
color: red;
.input100, textarea
width: 100% !important
.row-eq-height
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
.datepicker
z-index: 999 !important;
.big-checkbox
width: 1.5rem;
height: 1.5rem;
top: 0.5rem;
</style>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="resources/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="resources/favicon.png">
</head>
<body>
<div id="accountUpdate" class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">
<br><br><br><br>
<div id="includedContent"></div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-warning">
<h3>Edit Awards</h3>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tooltip.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-popover.js"></script>
<script src="js/awardsEdit8.js"></script>
</body>
</html>
js:
$(document).ready(function()
//document.addEventListener("DOMContentLoaded", function(event)
//Include the menu before the document is ready.
$("#includedContent").load("Menu.html", function()
//Do not allow these items to be selected when a youth member is not displayed
$(document).on("click", ".dropdown-menu li.disabled a", function()
return false;
);
);
);
这是精简菜单：
<head>
<title>Menu</title>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<meta name="application-name" content="Award Tracking Application" />
<meta name="author" content="Glyndwr (Wirrin) Bartlett" />
<meta name="description" content="A Scout award tracking application" />
<title>Bootstrap 3 Dropdowns within a Navbar for Award Tracking Application</title>
<style type="text/css">
.bs-example
margin: 5px;
.ypr_btnbackground-color:#ffbf00; color:white; padding: 8px 16px;
li.dropdown-header
color: #ff0000;
li#logOutAdmin, li#logOutGL, li#logOutGT, li#logOutQM, li#logOutJ, li#logOutC,
li#logOutS, li#logOutV, li#logOutR, li#logOutNL, li#logOutYM, li#logOutDis,
li#logOutDS, li#logOutReg, li#logOutSta, li#logOutSS
background-color:red;
li.selectRole
background-color:green;
/* News Ticker */
.onoffswitch3
position: relative;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
.onoffswitch3-checkbox
display: none;
.onoffswitch3-label
display: block;
overflow: hidden;
cursor: pointer;
border: 0px solid #999999;
border-radius: 0px;
.onoffswitch3-inner
display: block;
width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s;
-webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
.onoffswitch3-inner > span
display: block;
float: left;
position: relative;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
.onoffswitch3-inner .onoffswitch3-active
padding-left: 10px;
background-color: #EEEEEE;
color: #FFFFFF;
.onoffswitch3-inner .onoffswitch3-inactive
width: 140px;
padding-left: 16px;
background-color: #000000;
color: #FFFFFF;
text-align: right;
white-space: nowrap;
.onoffswitch3-switch
display: block;
width: 50%;
margin: 0px;
text-align: center;
border: 0px solid #999999;
border-radius: 0px;
position: absolute;
top: 0;
bottom: 0;
.onoffswitch3-active .onoffswitch3-switch
background: #27A1CA;
left: 0;
width: 160px;
.onoffswitch3-inactive
background: #A1A1A1;
right: 0;
width: 20px;
.onoffswitch3-checkbox:checked + .onoffswitch3-label .onoffswitch3-inner
margin-left: 0;
.glyphicon-remove
padding: 3px 0px 0px 0px;
color: #fff;
background-color: #000;
height: 25px;
width: 25px;
border-radius: 15px;
border: 2px solid #fff;
.scroll-text
color: #000;
</style>
<script type="text/javascript">
//YPR
if(sessionStorage.getItem('ssGroupNAS') === 'Y' )
$('.ypr_btn').text('NYP');
else
$('.ypr_btn').text('PAS');
$('.ypr_btn').click(function()
if($(this).text().trim() === 'NYP' )
$('.ypr_btn').text('PAS');
sessionStorage.setItem('ssGroupNAS', "N");
if(sessionStorage.getItem('ssAccountLevelX') === "Youth Member")
window.location = "AwardOverview.html";
else
window.location = "SelectPerson.html";
else
$('.ypr_btn').text('NYP');
sessionStorage.setItem('ssGroupNAS', "Y");
if(sessionStorage.getItem('ssAccountLevelX') === "Youth Member")
window.location = "AwardOverviewYPR.html";
else
window.location = "SelectPerson.html";
);
//Hide Select Role if user is not multi-role
if (sessionStorage.getItem('ssMultiRole') !== "Y")
$('li.selectRole').hide();
</script>
</head>
<body>
<script>
$("#myNavbarAdministrator").hide();
$("#myNavbarDistrict").hide();
$("#myNavbarDistrictSection").hide();
$("#myNavbarGroupLeader").hide();
$("#myNavbarGroupTreasurer").hide();
$("#myNavbarLeaderJoey").hide();
$("#myNavbarLeaderCub").hide();
$("#myNavbarLeaderScout").hide();
$("#myNavbarLeaderVenturer").hide();
$("#myNavbarLeaderRover").hide();
$("#myNavbarNonLeader").hide();
$("#myNavbarQuartermaster").hide();
$("#myNavbarRegion").hide();
$("#myNavbarRegionSection").hide();
$("#myNavbarState").hide();
$("#myNavbarStateSection").hide();
$("#myNavbarYouthMember").hide();
switch (true)
case (sessionStorage.getItem('ssAccountLevelX') === "Administrator") : $("#myNavbarAdministrator").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "District") : $("#myNavbarDistrict").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "District-Section") : $("#myNavbarDistrictSection").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Group-Leader") : $("#myNavbarGroupLeader").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Group-Treasurer") : $("#myNavbarGroupTreasurer").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Quartermaster") : $("#myNavbarQuartermaster").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Leader"
&& sessionStorage.getItem('ssGroupSection') === "Joey") : $("#myNavbarLeaderJoey").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Leader"
&& sessionStorage.getItem('ssGroupSection') === "Cub") : $("#myNavbarLeaderCub").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Leader"
&& sessionStorage.getItem('ssGroupSection') === "Scout") : $("#myNavbarLeaderScout").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Leader"
&& sessionStorage.getItem('ssGroupSection') === "Venturer") : $("#myNavbarLeaderVenturer").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Leader"
&& sessionStorage.getItem('ssGroupSection') === "Rover") : $("#myNavbarLeaderRover").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Non-leader") : $("#myNavbarNonLeader").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Region") : $("#myNavbarRegion").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Region-Section") : $("#myNavbarRegionSection").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "State") : $("#myNavbarState").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "State-Section") : $("#myNavbarStateSection").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Youth Member") : $("#myNavbarYouthMember").show(); $("#newsDiv").show(); break;
</script>
<div class="global-menu">
<!-- Administrator's menu -->
<nav id="myNavbarAdministrator" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#administratorNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="administratorNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">EAP<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="EAP.html">Event Approval Package</a></li>
<li><a href="EAPAdministration.html">EAP Administration</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Administration<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="AccountAdmin.html">Accounts Admin</a></li>
<li><a href="AccountDetails.html">Account Details</a></li>
<li><a href="AccountEmailAdmin.html">Account Email</a></li>
<li><a href="AccountLeader.html">Account Leader Association</a></li>
<li><a href="AccountActivation.html">Account Status Update</a></li>
<li><a href="AccountTransfer.html">Account Transfer</a></li>
<!-- <li><a href="AccountSection.html">Assign Unit to Account</a></li> -->
<li><a href="AwardsEdit.html">Award Administration</a></li>
<li><a href="CaptchaAdministration.html">Captcha Administration</a></li>
<li><a href="GroupAdmin.html">Group Administration</a></li>
<li><a href="IssueRequestAdmin.html">Issue Administration</a></li>
<li><a href="LeaderAdminAdministrator.html">Leader Administration</a></li>
<li><a href="LinksAdmin.html">Links</a></li>
<li><a href="MealMenus.html">Meal Menus</a></li>
<li><a href="NewsAdmin.html">News</a></li>
<li><a href="PatrolAdmin.html">Patrol Administration</a></li>
<li><a href="PasswordReset.html">Reset Password</a></li>
<li><a href="ResourceAdmin.html">Resources</a></li>
<li><a href="CatSandwichAdmin.html">Sandwich Administration</a></li>
<li><a href="ScoutTransfer.html">Scout Transfer</a></li>
<li><a href="SectionAwardOrder.html">Unit Award Order</a></li>
<li><a href="SectionAwardType.html">Unit Award Type</a></li>
<li><a href="YouthMemberAdmin.html">Youth Member Administration</a></li>
</ul>
</li>
<li class="dropdown">
<a href="PP.html">Program Planner</a>
</li>
<!--
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="OASSupportReq.html">OAS Support Request</a></li>
<li><a href="#">My Messages</a></li>
<li><a href="#">Send Account Emails</a></li>
</ul>
</li>
-->
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Reports<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="AwardUsage.html">Award Usage</a></li>
<li><a href="EmailAddresses.html">Email Addresses</a></li>
<li><a href="GroupsAdminReport.html">Groups</a></li>
<li><a href="Statistics.html">Statistics</a></li>
<li><a href="ProgressChart.html">Progress Chart</a></li>
<li><a href="UsageReport.html">Usage</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="logOutAdmin"><a href="Login.html"><font color="ffffff"><b>Log out</b></font></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</div>
</body>
【问题讨论】：
你知道“编辑”这个词上方的灰线是什么吗？另外，菜单是否可能在顶部上方并且需要边距？菜单的“路径”是否改变了？ 您能否发布生成页面的完整 BS5 代码（而不仅仅是页面图片）？如果没有重复问题的代码，很难提供任何建议。 嗨 Wazz，灰线是应该包含菜单的 div。我在 div 上方添加了一些 来测试页面下方的所有内容。不，路径没有改变:-)。 嗨 Rich，请原谅我的无知；但是，什么是 BS5 代码？你想让我发布 js 和 html 文件吗？如果是，那么我将创建一个最小代码演示。 嗨，你也可以显示Menu.html 吗？
【参考方案1】：
由于 Bootstrap 5 (BS5) 与 Bootstrap 3 (BS3) 相比发生了很大变化，您将需要使用 BS5 类重新创建页面。
您添加到问题中的菜单代码适用于 BS3。我使用该代码作为使用 BS5 创建相同概念的基础。这有点不同。例如，BS3 使用 14px 字体大小，而 BS5 使用 16px 字体大小。您可以覆盖所有这些类型的更改，但使用当前可用的屏幕分辨率，使用 BS5 的标准可能更适合您的用户。
在 BS5 中重新创建的菜单
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<style>
.dropdown-item
padding: 0.1875rem 1rem;
line-height: normal;
</style>
<div class="global-menu">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav w-100 me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-bs-toggle="dropdown" aria-expanded="false">
EAP
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
<li><a class="dropdown-item" href=" EAP.html">Event Approval Package</a></li>
<li><a class="dropdown-item" href=" EAPAdministration.html">EAP Administration</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Administration
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2">
<li><a class="dropdown-item" href="AccountAdmin.html">Accounts Admin</a></li>
<li><a class="dropdown-item" href="AccountDetails.html">Account Details</a></li>
<li><a class="dropdown-item" href="AccountEmailAdmin.html">Account Email</a></li>
<li><a class="dropdown-item" href="AccountLeader.html">Account Leader Association</a></li>
<li><a class="dropdown-item" href="AccountActivation.html">Account Status Update</a></li>
<li><a class="dropdown-item" href="AccountTransfer.html">Account Transfer</a></li>
<!-- <li><aclass="dropdown-item" href="AccountSection.html">Assign Unit to Account</a></li> -->
<li><a class="dropdown-item" href="AwardsEdit.html">Award Administration</a></li>
<li><a class="dropdown-item" href="CaptchaAdministration.html">Captcha Administration</a></li>
<li><a class="dropdown-item" href="GroupAdmin.html">Group Administration</a></li>
<li><a class="dropdown-item" href="IssueRequestAdmin.html">Issue Administration</a></li>
<li><a class="dropdown-item" href="LeaderAdminAdministrator.html">Leader Administration</a></li>
<li><a class="dropdown-item" href="LinksAdmin.html">Links</a></li>
<li><a class="dropdown-item" href="MealMenus.html">Meal Menus</a></li>
<li><a class="dropdown-item" href="NewsAdmin.html">News</a></li>
<li><a class="dropdown-item" href="PatrolAdmin.html">Patrol Administration</a></li>
<li><a class="dropdown-item" href="PasswordReset.html">Reset Password</a></li>
<li><a class="dropdown-item" href="ResourceAdmin.html">Resources</a></li>
<li><a class="dropdown-item" href="CatSandwichAdmin.html">Sandwich Administration</a></li>
<li><a class="dropdown-item" href="ScoutTransfer.html">Scout Transfer</a></li>
<li><a class="dropdown-item" href="SectionAwardOrder.html">Unit Award Order</a></li>
<li><a class="dropdown-item" href="SectionAwardType.html">Unit Award Type</a></li>
<li><a class="dropdown-item" href="YouthMemberAdmin.html">Youth Member Administration</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="PP.html">Program Planner</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Reports
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown3">
<li><a class="dropdown-item" href="AwardUsage.html">Award Usage</a></li>
<li><a class="dropdown-item" href="EmailAddresses.html">Email Addresses</a></li>
<li><a class="dropdown-item" href="GroupsAdminReport.html">Groups</a></li>
<li><a class="dropdown-item" href="Statistics.html">Statistics</a></li>
<li><a class="dropdown-item" href="ProgressChart.html">Progress Chart</a></li>
<li><a class="dropdown-item" href="UsageReport.html">Usage</a></li>
</ul>
</li>
<li class="nav-item ms-md-auto">
<a type="button" href="Login.html" class="btn btn-danger">Log out</a>
</li>
</ul>
</div>
</div>
</nav>
</div>我确实更改了菜单项的行高和垂直填充，以便它们更适合页面。
使用 @ 和用户名确实有助于回复以前的 cmets - 这样做会将消息发送到我的收件箱。
【讨论】：
嗨 Rich，这太棒了！最后一个问题。每个 id="navbarDropdown1" 是否应该是唯一的（您有多个相同的 id）？【参考方案2】：检查 DOM。有菜单代码吗？如果是，那么您最常更改菜单 css 位置样式和/或检查中的 z-index 以修复它。
【讨论】：
什么是 DAM，我该如何检查它？ 将 class="includedContent" 添加到 div 和 .includedContent z-index: 100;位置：绝对；这只是将小灰色框向下移动。我尝试了 -1，这隐藏了壁纸图像后面的小灰色框。 对不起 DOM ，运行你的网页并去检查浏览器的元素，并检查 html 找到菜单 嗨 Hossein，这对我帮助很大，并引导我走上正确的道路，将导航更改为以上是关于使用 bootstrap 5 cdn 时 Jquery 包含的菜单未显示在 html 页面上的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap cdn 覆盖了我在 react js 中的自定义 css 样式
Bootstrap 4 媒体查询 mixin 不能通过 CDN 与 Bootstrap 4 一起使用