私のブートストラップメニューにモバイルビューが表示されないのはなぜですか？

私はこの単純なhtmlコードを使っていますが、メニューがモバイルビューで表示されない理由を見つけられないようです。コードを何度も何度も繰り返しました誰かが私に何が足りないのか理解してもらえますか？私のブートストラップメニューにモバイルビューが表示されないのはなぜですか？

<!DOCTYPE html> 
 
    <html> 
 
    
 
     <head> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"> 
 
     <!-- CSS Files comes here --> 
 
     <link rel="stylesheet" href="css/bootstrap.css" media="screen"> 
 
     <link href="css/font-awesome.min.css" rel="stylesheet"> 
 
     <link href="css/owl.carousel.css" rel="stylesheet" media="screen"> 
 
    
 
     <link href="css/owl.theme.css" rel="stylesheet" media="screen"> 
 
     <link href="css/prettyPhoto.css" rel="stylesheet"> 
 
     <link rel="stylesheet" href="css/style.css" media="screen"> 
 
     </head> 
 
    
 
     <body class="blue"> 
 
     <div class="preloader"></div> 
 
     <!--Background --> 
 
     <!-- image is set in the CSS as a background image --> 
 
     <div class="backgroundcover"></div> 
 
     <!-- End Background --> 
 
     <!-- Start Header --> 
 
     <header class="header" id="home" class="navbar navbar-inverse navbar-fixed-top" role="banner"> 
 
      <div class="container"> 
 
      <div class="navbar-header"> 
 
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar">home3</span> 
 
       <span class="icon-bar">home2</span> 
 
       <span class="icon-bar">home1</span> 
 
       </button> 
 
       <!-- Your Logo --> 
 
       <a href="../" class="navbar-brand"><img src="image/logo1.png" alt="IDAS" /></a> 
 
      </div> 
 
      <!-- Start Navigation --> 
 
      <nav class="collapse navbar-collapse bs-navbar-collapse navbar-right" role="navigation"> 
 
       <ul class="nav navbar-nav menu"> 
 
       <li> 
 
        <a href="#main">Home</a> 
 
       </li> 
 
       <li> 
 
        <a href="#features">Our Goals</a> 
 
       </li> 
 
       <li> 
 
        <a href="about.html#features">Fund Process</a> 
 
       </li> 
 
       <li> 
 
        <a href="#gallery">Competition</a> 
 
       </li> 
 
       <li> 
 
        <a href="#impFeature">Partners</a> 
 
       </li> 
 
       <li> 
 
        <a href="#slider">News & Events</a> 
 
       </li> 
 
       <li> 
 
        <a href="#footer">Contact Us</a> 
 
       </li> 
 
       </ul> 
 
       <ul class="nav navbar-nav navbar-right header-button"> 
 
       <li> 
 
        <button type="button" class="btn btn-primary">Submit Proposal</button> 
 
       </li> 
 
       </ul> 
 
      </nav> 
 
      </div> 
 
     </header> 
 
     <!-- End Header --> 
 
     </body>

出典

2017-02-17 Fiifi Is-Alright

これは有効なHTMLではありません： '<ヘッダークラス= "ヘッダ" ID = "ホーム" クラス= "ナビゲーションバーナビゲーションバー-逆ナビゲーションバーに固定されたトップ" 役割= "バナー">' 。あなたは2つのクラス属性を持っています。また、jQueryとBootstrap.jsを組み込む必要があります。 – vanburen

あなたは、ブートストラップ用jquery.min.jsとbootstrap.min.js、適切なナビゲーションのマークアップを使用する必要があります。また、glyphiconsのフォントフォルダをコピーし、ルートディレクトリに貼り付けます。

以下のコードを使用して、これがうまくいくと思います。

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"> 
    <!-- CSS Files comes here --> 
    <link rel="stylesheet" href="css/bootstrap.css" media="screen"> 
    <link href="css/font-awesome.min.css" rel="stylesheet"> 
    <link href="css/owl.carousel.css" rel="stylesheet" media="screen"> 

    <link href="css/owl.theme.css" rel="stylesheet" media="screen"> 
    <link href="css/prettyPhoto.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/style.css" media="screen"> 
    </head> 

    <body class="blue"> 
    <div class="preloader"></div> 
    <!--Background --> 
    <!-- image is set in the CSS as a background image --> 
    <div class="backgroundcover"></div> 
    <!-- End Background --> 
    <!-- Start Header --> 

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a href="../" class="navbar-brand"><img src="image/logo1.png"    alt="IDAS" /></a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav menu"> 
      <li> 
       <a href="#main">Home</a> 
      </li> 
      <li> 
       <a href="#features">Our Goals</a> 
      </li> 
      <li> 
       <a href="about.html#features">Fund Process</a> 
      </li> 
      <li> 
       <a href="#gallery">Competition</a> 
      </li> 
      <li> 
       <a href="#impFeature">Partners</a> 
      </li> 
      <li> 
       <a href="#slider">News & Events</a> 
      </li> 
      <li> 
       <a href="#footer">Contact Us</a> 
      </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right header-button"> 
      <li> 
       <button type="button" class="btn btn-primary">Submit Proposal</button> 
      </li> 
      </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 
    <!-- End Header --> 
    <script type="text/javascript" src="js/jquery.min.js" ></script> 
    <script type="text/javascript" src="js/bootstrap.min.js" ></script> 
    </body> 
    </html>

working screenshot

出典

2017-02-17 20:26:26

サブメニューを追加しようとしましたが、歪んで見えます。 –

モバイルナビのバックグラウンドのみを変更するにはどうすればよいですか？ –

私のブートストラップメニューにモバイルビューが表示されないのはなぜですか？

答えて

関連する問題