2016-07-04 9 views
1

以下は私のコードで、レスポンシブなナビゲーションバーを持つ予定です。それは大きな画面では適切に表示されますが、何らかの理由で小さな画面で崩壊することはありません。ブートストラップでレスポンシブなナビゲーションバーを作成するには

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Bootstrap, from Twitter</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    </head> 
<body> 
<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 
<script src="https://ajax.googleanalytics.com/ajax/libs/jquery/1.11.3.jquery.min.js"> </script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script> 

どのように私はトグルボタンの崩壊を行うことができますか?

https://jsfiddle.net/Wosley_Alarico/8wncr2dm/

+1

jQueryスクリプトへのリンクが壊れています。 – makshh

+0

https://jsfiddle.net/8wncr2dm/3/ –

+0

navbarのブレークポイントを変更する方法はありますか? –

答えて

1

としてあなたはjQueryのブートストラップのJavaScriptのためだけに使用誤ったバージョンは、jQueryのバージョン1.9.1以降が必要ですが、バージョン3

よりも低くはしてみてくださいinclude https://code.jquery.com/jquery-2.2.4.min.js

+0

ありがとうございました+ –

+0

あなたを歓迎します:D –

0

あなたは正しくはjQueryを呼び出していません。あなたのフィドルを検査することは、これを示しています

Error: Bootstrap's JavaScript requires jQuery

あなたが使用しているドメインが間違っているように見えます、そしてあなたは、ドットのためにスラッシュを置き忘れています。代わりにこれを試してください:あなたのブートストラップコードで

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

0

問題ありません。コードのスクリプトタグで使用しているjquery cdnだけが機能していません。代わりに別のcdnを使用してください。

https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js

編集スクリプトタグを

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> 
+0

彼のコードに問題があり、彼が提供したリンクが間違っていて、404エラーを返します。 – Lee

+0

@Leeどのリンクを話しているのですか –

+0

jQueryへの呼び出し – Lee

関連する問題