Question

我面临的问题是，在较小的视口上查看站点时，导航栏的切换按钮显示正确，可以单击以展开导航栏，但是导航栏立即再次折叠。因此，我单击它，它展开但再次关闭。下面是目前使用的整个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 &copy; 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"/>

Answer 1

我实际上找到了解决方案：基本上我在下面更改了这一行代码

<asp:ScriptReference Path="Scripts/bootstrap.js"/>

到

<asp:ScriptReference Path="Scripts/bootstrap.bundle.js"/>

现在导航栏正在正确展开和折叠

bootsrap 4导航栏尚未扩展

1 个答案: