爲什麼我的Bootstrap菜單不顯示移動視圖

我有這個簡單的HTML代碼正在工作，我似乎沒有找到菜單沒有在移動視圖中顯示的原因。我已經經歷了一遍又一遍的代碼有人可以幫我找出我在這裏失蹤的東西。爲什麼我的Bootstrap菜單不顯示移動視圖

<!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 = 「家」類= 「導航欄導航欄逆Navbar的固定頂」角色= 「旗幟」>' 。你有2個類的屬性。您還需要包含jQuery和Bootstrap.js以使您的移動導航工作。 – vanburen

您需要使用jquery.min.js和bootstrap.min.js和適當的導航標記的自舉。同時複製glyphicons fonts文件夾並粘貼到您的根目錄中。

使用下面的代碼，希望這會對你有用。

<!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

我試圖添加一個子菜單，但它看起來扭曲。 –

我如何只更改移動導航背景？ –

爲什麼我的Bootstrap菜單不顯示移動視圖

回答

相關問題