Bootstrap v4 切换下拉菜单在本地不工作，但在公共站点上工作答案

【问题标题】：Bootstrap v4 toggle drop-down menu not working locally, but works on public siteBootstrap v4 切换下拉菜单在本地不工作，但在公共站点上工作
【发布时间】：2018-01-21 19:07:36
【问题描述】：

在今天的大部分时间里，我的 bootstrap v4 可折叠汉堡菜单无法在本地 xampp 服务器上运行。奇怪的是，它在我的public website 上运行良好！汉堡包出现在 768 像素宽的显示屏上。这是 Chrome 和 Firefox 中存在的问题。

我很茫然。我已经梳理了类似的 stackoverflow 线程，但没有找到任何解决我问题的方法。我的导航栏代码块也与 lynda.com 上的 Bootstrap 类中的导航栏示例相同。

我知道这么多：

我正在使用最新的缩小版 jquery，并且我的 xampp/local“index.html”文档的“head”部分中的 javascript 脚本文件的顺序与我的托管/公共服务器索引中的顺序相同.html 文件。这是一个可能或可能无关紧要的区别：我使用 CDN 链接访问我的公共/托管页面的所有引导文件，并使用相对链接路径访问我计算机上的 XAMPP/本地网站的 JS/CSS 文件（“htdocs " 是我的 xampp 设置的根文件夹）。

为了排除某些问题，我将公共页面中的导航条码块（使汉堡图标在单击时展开的代码）复制/粘贴到我在 xampp 上托管的本地 index.html 文件中。没有喜悦。我知道相对文件夹路径对于本地 xampp 服务器中的 javascript 文件是正确的（htdocs 是根文件夹，JS 文件位于“js”文件夹中）。

我还尝试将最新版本的 jQuery (3.2.1) 重新下载到我的本地文件夹中，我认为我使用的文件可能已损坏，但仍然没有。我假设汉堡菜单功能是 jQuery 的东西，但也许它是 javascript。

最后：我检查了本地“index.html”页面的控制台，没有错误。

那是什么？为什么我的汉堡菜单不能在我的本地生产服务器上运行，但在我的公共页面上运行良好？它是否与通过 CDN 加载的 javascript 文件与我的硬盘驱动器上的本地文件有关？

请在下面查看我的本地生产/xampp 服务器的 head 和 nav 条形码块（这是不起作用的代码），然后是我的 head 和 nav 栏的代码块（这是起作用的代码）。我认为问题在于“头部”部分以及 js 是如何链接/访问的。

感谢您的帮助！

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-US-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="text/html" http-equiv="Content-Type"/>
    <meta content="Steve Gladwin" name="description"/>
    <meta content="portfolio, design, steve, steven, stephen, systems, librarian, social media, library," name="keywords"/>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

 
<!-- Bootstrap CSS -->

      <link rel="stylesheet" href="/css/bootstrap.min.css">

     <!-- Local CSS File -->

    <link rel="stylesheet" type="text/css" href="/css/main.css" media="screen">
    <title>Steve Gladwin</title>


 
    <!-- Bootstrap Javascript/jQuery -->
    <script src="/js/jquery-3.2.1.min.js"></script>

     <!-- Bootstrap JS Tether -->

   <script src="/js/tether.min.js"</script>

   <!-- Bootstrap JS -->

   <script src="/js/bootstrap.min.js"></script>





    

</head>


<body>

  <!-- <div class="container">
        <div class="row">
      <div class="col-md-12"> -->
    
         <nav class="navbar navbar-inverse navbar-toggleable-sm" style="background-color: red;">
          <!-- <div class="container"> -->

          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#burgercollapse" aria-controls="burgercollapse" aria-expanded="false" aria-label="toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>

            <h1 class="navbar-brand mr-auto">Steve Gladwin</h1>
          <!--   </div> -->


          <div class="collapse navbar-collapse" id="burgercollapse">
              <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link active" href="index.html">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Resume</a></li>
                <li class="nav-item"><a class="nav-link" href="#">For Fun</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Social</a></li>
              </ul>
            </div> <!--collpase-->


          </nav>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-US-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="text/html" http-equiv="Content-Type"/>
    <meta content="Steve Gladwin" name="description"/>
    <meta content="portfolio, design, steve, steven, stephen, systems, librarian, social media, library," name="keywords"/>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    <!-- Bootstrap Javascript/jQuery -->
   <!--  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
   <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> -->
    <!-- script src="css/bootstrap-4.0.0-alpha.6-dist/tether-1.3.3/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous">
</script> -->
<!-- <script src="css/bootstrap-4.0.0-alpha.6-dist/js/jquery-3.2.1.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous">
</script> -->





<!--<script src="css/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous">
</script>-->
    <!-- <link href="css/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> -->
    <!-- <link href="css/bootstrap-4.0.0-alpha.6-dist/css/bootstrap-grid.min.css" rel="stylesheet">
    <link href="css/bootstrap-4.0.0-alpha.6-dist/css/bootstrap-reboot.min.css" rel="stylesheet"> -->
    <link rel="stylesheet" type="text/css" href="CSS/main.css" media="screen">
    <title>Steve Gladwin</title>
</head>


<body>

  <!-- <div class="container">
    <div class="row">
    
      <div class="col-md-4">
        <h2>Steve Gladwin</h2>
      </div> -->
      
   <!--    <div class="container">
        <div class="row">
      <div class="col-md-12"> -->
    
         <nav class="navbar navbar-inverse navbar-toggleable-sm" style="background-color: red;">
          <!-- <div class="container"> -->

          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#burgercollapse" aria-controls="burgercollapse" aria-expanded="false" aria-label="toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>

            <h1 class="navbar-brand mr-auto">Steve Gladwin</h1>
          <!--   </div> -->


          <div class="collapse navbar-collapse" id="burgercollapse">
              <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link active" href="index.html">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Resume</a></li>
                <li class="nav-item"><a class="nav-link" href="#">For Fun</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Social</a></li>
              </ul>
            </div> <!--collpase-->


          </nav>

【问题讨论】：

第 1 步：您是否重新下载了 Bootstrap 的 .css 和 .js 文件？第 2 步：您是否尝试过在本地版本中使用 CDN 而不是本地文件？

标签： javascript jquery html css bootstrap-4

【解决方案1】：

您在第一个代码块上的标记格式错误

<script src="/js/tether.min.js"</script>

你错过了结束>

您还在其他代码块中引用 CDN，并在本地版本中引用相关文件。确保它们被正确引用。

【讨论】：

这就是我喜欢 Stackoverflow 的原因！我永远不会自己抓住这个。那个小小的关闭 > 是修复它的东西。惊人的。谢谢！