ハンバーガーとドロップダウンがブートストラップナビでモバイルに表示されない

私はここで掲示板を検索してきましたが、何が間違っているかをカバーするものはありません。私のnavbarはすべてうまくいいですが、携帯電話に行くとハンバーガーやメニューは表示されません。私は、組み合わせを変更して、異なる折り畳み名を実装しようとしましたが、役に立たないものです。何か案は？ここに私のコードは次のとおりです。また、あなたのナビゲーションタグがUL要素の後にクローズされていないハンバーガーとドロップダウンがブートストラップナビでモバイルに表示されない

 <header class="navbar navbar-custom" role="banner"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
    </div> 
    <nav class="collapse navbar-collapse" role="navigation"> 
      <ul class="nav navbar-nav pages"> 
       <li class="page"><a href="item1.html">item1</a></li> 
       <li class="page"><a href="item2.html">item2</a></li> 
       <li class="page"><a href="item3.html">item3</a></li> 
       <li class="page hidden-xs"><a href="item1.html"><img id="nav-brand" src="images/nav-logo1.png" width="120" alt="logo description"></a></li> 
       <li class="page"><a href="item4.html">item4</a></li> 
       <li class="page"><a href="item5.html">item5</a></li> 
       <li class="page"><a href="item6.html">item6</a></li> 
      </ul> 
     </div> 
    </div> 
</header>

出典

2016-09-22 SealHead1

コンソールにエラーがありますか？適切なファイルが含まれていますか？ – j08691

チェックあなたの頭の部分にメタタグを持っている場合

<meta name="viewport" content="width=device-width, initial-scale=1">

。あなたのタグ閉鎖に

を確認してください私は</ul>は、元のコードでは

出典

2016-09-22 20:19:01

を交換する必要があり</div>後、NAVを閉じdiv要素があると思います。それは私がこのサイトのためにフォーマットしたときに起こった。オリジナルでは、navタグで閉じられます。私はヘッダーセットを含めるのを忘れていました。ここではそれらは：uはスクロールが水平に表示される画面とハンバーガーのアイコンを最小化したときuがするときに完全に応答しないで、あなたのコンテンツやscreen.thatが理由の一つである最小化したとき

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Home</title> 
    <link rel='shortcut icon' href='images/favicon.ico' type='image/x-icon'/ > 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
     crossorigin="anonymous"> 
    <link rel="stylesheet" href="css/styles.css"> 
    <script src="js/main.js"></script> 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
     crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
     integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
    <link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet"> 
    <script src="https://use.fontawesome.com/8633c13aa3.js"></script> 
</head>

出典

2016-09-22 20:37:01 SealHead1

あなたは、水平スクロールをチェックする必要があります

最初にすべてのコンテンツを削除してページ内のナビゲーションを期待し、画面を最小化してください。問題が解決しない場合は、背景色と色が変更されているかどうかもチェックしてください。

出典

2016-09-22 20:46:03

私はそれを試みた。あなたは、背景色の変化についてあなたが何を意味するのかを説明できますか？ – SealHead1

ハンバーガーとドロップダウンがブートストラップナビでモバイルに表示されない

答えて

関連する問題