私はBootstrapを練習していて、自分のWebページにnavbarを追加しました。しかし、nav-barトグラーは小さな画面では動作していませんし、アイコンnavbar-toggler-iconも表示されません。Bootstrap 4 Beta 2 navbar-togglerが動作しない
ここに私のナビゲーションバーコードがあります:
<nav class="navbar navbar-inverse navbar-expand-md fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
私はすでに、インターネット上で検索し、私はjqueryのをなくすことができることを見つけたが、私は二重にチェックしていると私は体の下部にJavaScriptを追加していることを発見しました次の順序で:
:
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
私が見ることができるように、ブラウザのJavaScriptファイルを取得していることも確認しました
私は間違っていますが、どうすれば修正できますか?
ありがとうございました。
EDIT:link
EDIT2をjsfiddleする:私は、そのリンクを犯人を見つけました。それは働いていない理由を私はNPMを使用して、それを追加しているので、私は知らないとpackage.jsonでの依存関係は以下のようにそれを示しています。
{
"name": "confusion",
"version": "1.0.0",
"description": "This is a website for Ristorante Con Fusion",
"main": "index.html",
"scripts": {
"start": "npm run lite",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"lite-server": "^2.3.0"
},
"dependencies": {
"bootstrap": "^4.0.0-beta.2",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"popper.js": "^1.12.6"
}
}
EDIT 3:次のエラーがポッパーに関するコンソールで発生します。
あなたはそれのフィドル –
を追加することができ、私はあなたを取得できませんでした。あなたはhtml全体をバイブルにコピーすることを意味しますか? – zhaider
投稿に追加されました。 – zhaider