對於大多數今天我不能讓我的引導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>
第1步:你重新下載的引導.css和.js文件?步驟2:您是否嘗試過在本地版本中使用CDN而不是本地文件? – Aydin4ik