2017-08-14 29 views
0

對於大多數今天我不能讓我的引導V4可摺疊漢堡菜單到我的本地XAMPP服務器上運行。奇怪的是,它在我的public website上工作得很好!漢堡包出現在768 px寬的顯示屏上。這是Chrome和Firefox中存在的問題。引導V4切換下拉菜單不在本地工作,但工作在公共網站

我不知所措。我梳理了類似的stackoverflow線程,但沒有找到任何解決我的問題。我的導航欄代碼塊也與lynda.com上的Bootstrap類中的導航欄示例相同。

我知道這麼多:

我使用jQuery的最新版本縮小的,以及JavaScript腳本文件的我XAMPP的「頭」一節中的順序/本地「的index.html」的文檔是相同的到我的託管/公共服務器index.html文件中的一個。這裏是一個區別可能會或可能不會事:我使用CDN鏈接來訪問所有的引導文件我的公共/託管的頁面,並使用相對鏈接路徑來訪問我的計算機上的JS/CSS文件我的XAMPP /本地網站(「htdocs目錄「是我的xampp安裝程序的根文件夾)。

爲了排除一些事情,我從我的公共頁面(使得漢堡包圖標在點擊後展開的代碼)複製/粘貼導航條碼塊到本地的index.html文件中,該文件位於xampp上。沒有快樂。我知道相對的文件夾路徑對於本地xampp服務器中的JavaScript文件是正確的(htdocs是根文件夾,而JS文件位於「js」文件夾中)。

我也嘗試重新下載的jQuery(3.2.1)的最新版本爲我的本地文件夾想,也許我使用已損壞的文件,但仍然一無所獲。我假設漢堡菜單功能是一個jQuery的東西,但也許它是JavaScript。

最後:我檢查了控制檯我的地方「的index.html」頁面,並沒有任何錯誤。

那麼是什麼給?爲什麼我的漢堡包菜單不能在我的本地生產服務器上運行,但在我的公共頁面上正常工作?它是否與通過CDN加載的JavaScript文件與本地硬盤上的文件相關?

請在我的本地生產/ xampp服務器(這是不起作用的代碼)和我的頭部和導航欄的代碼塊下面看到我的頭部和導航欄代碼塊(這是代碼工作)。我認爲問題在於「頭」部分以及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>

+0

第1步:你重新下載的引導.css和.js文件?步驟2:您是否嘗試過在本地版本中使用CDN而不是本地文件? – Aydin4ik

回答

0

您的第一代碼塊標記的格式不正確

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

你錯過收盤>

您引用您的本地版本的其他代碼塊還的CDN及相關文件。確保它們被正確引用。

+0

這就是爲什麼我愛Stackoverflow!我本人從來沒有發現過這一點。這個小小的關閉>是固定它的東西。驚人。謝謝! – Hoppingvampireprogrammer

相關問題