2017-10-24 12 views
3

私は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:次のエラーがポッパーに関するコンソールで発生します。

enter image description here

+1

あなたはそれのフィドル –

+0

を追加することができ、私はあなたを取得できませんでした。あなたはhtml全体をバイブルにコピーすることを意味しますか? – zhaider

+0

投稿に追加されました。 – zhaider

答えて

1

.nav-inverseを削除し、あなたはそれが暗い色にしたい場合はnavbar-dark bg-darkを追加します。また、.navbar-toggleボタンにdata-toggle属性を追加する必要があります。ここ

ここナビゲーションバー

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> \t 
 
</head> 
 
<body> 
 
<nav class="navbar navbar-dark bg-dark navbar-expand-md fixed-top"> 
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
     </button> 
 
    <a class="navbar-brand" href="#">Ristorante Con Fusion</a> 
 
     <div class="collapse navbar-collapse" id="navbarsExampleDefault"> 
 
     <ul class="navbar-nav mr-auto"> 
 
     <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> 
 
    </nav> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> \t 
 
</body> 
 
</html>

の実施例は、上記のコードのjsbinあります。

+0

navbar-toggler-iconが表示されない問題を解決しました。しかし、私はFirefoxとChromeの両方でそれをテストしました。その応答性の高いタブでは、ボタンはまだTogglerとして動作していません。ただ現れます。元の投稿に示されているように、データトグル属性を既に追加しています。 bg-darkとnavbar-darkに切り替えた後、元の投稿で行ったように、私が選んだ色のnav barを作成するにはどうすればいいですか? – zhaider

+0

'.navbar-nav'を含むdivのIDは' .navbar-toggle'ボタンの 'data-target'と一致しなければなりません。そうしないと動作しません。navbarの色に関して、ブートストラップによって提供される色はほとんどありません。http://getbootstrap.com/docs/4.0/components/navbar/、CSSで色を追加できます。 – azs06

+0

しかし、私はpopper.jsのリンクがうまくいかない理由はまだ分かりません。あなたは何か考えていますか?元の投稿を編集しました。 – zhaider

関連する問題