我面临的问题是,在较小的视口上查看站点时,导航栏的切换按钮显示正确,可以单击以展开导航栏,但是导航栏立即再次折叠。因此,我单击它,它展开但再次关闭。下面是目前使用的整个html代码。有谁能发现任何问题?
<html>
<head>
<title>Amalfi 5 Stars - Amalfi coast holidays</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="css/Site.css" rel="stylesheet" media="screen" />
<link href="css/MediaQueries.css" rel="stylesheet" media="screen" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" AllowCustomErrorsRedirect="True" EnablePageMethods="True" ScriptMode="Auto">
<scripts>
<asp:ScriptReference Path="Scripts/jquery-3.4.1.js"/>
<asp:ScriptReference Path="Scripts/bootstrap.js"/>
</scripts>
</asp:ScriptManager>
<div class="container-fluid">
<header>
<div class="bg-dark">
<div class="row">
<div class="col-md-12 div-img-header">
</div>
</div>
</div>
</header>
<nav class="navbar navbar-expand-lg bg-info navbar-light fixed-top">
<a class="navbar-brand" href="Default.aspx">
<img class="navbar-logo mx-auto" src="images/Theme/logo.png" alt="Amalfi 5 stars" title="Amalfi 5 stars" >
</a>
<button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="collapsibleNavbar" class="collapse navbar-collapse justify-content-center" >
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#Intro">Rentals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Calc">Excursions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Calc">Luxury Transfers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Calc">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contactus.aspx">Contact</a>
</li>
</ul>
</div>
</nav>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
<div class="body-content"></div>
</asp:ContentPlaceHolder>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Amalfi 5 stars</small>
</div>
</footer>
</form>
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
<script>
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#000"
},
"button": {
"background": "#f1d600"
}
},
"theme": "edgeless",
"content": {
"href": "amalfifivestars.com/privacy"
}
});
</script>
</body>
</html>
更新 我实际上找到了解决方案,但我想知道社区对此有何看法。
基本上我更改了这一行代码
<asp:ScriptReference Path="Scripts/bootstrap.js"/>
到
<asp:ScriptReference Path="Scripts/bootstrap.bundle.js"/>
答案 0 :(得分:0)
我实际上找到了解决方案:基本上我在下面更改了这一行代码
<asp:ScriptReference Path="Scripts/bootstrap.js"/>
到
<asp:ScriptReference Path="Scripts/bootstrap.bundle.js"/>
现在导航栏正在正确展开和折叠