Warum zeigt mein Bootstrap-Menü keine mobile Ansicht

Ich habe diesen einfachen HTML-Code bearbeitet und ich finde nicht den Grund, warum das Menü nicht in der mobilen Ansicht angezeigt wird. Ich bin immer wieder durch den Code gegangen Könnte jemand bitte mir helfen herauszufinden, was hier fehlt.Warum zeigt mein Bootstrap-Menü keine mobile Ansicht

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

Quelle

2017-02-17 Fiifi Is-Alright

Dies gilt nicht, HTML: '

Sie benötigen jquery.min.js und bootstrap.min.js und richtigen nav Markup für Bootstrap zu verwenden. Kopieren Sie auch den Glyphicons Schriftarten-Ordner und fügen Sie ihn in Ihr Stammverzeichnis ein.

Verwenden Sie unter Code, hoffe, dass dies für Sie arbeiten wird.

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

Quelle

2017-02-17 20:26:26

Ich habe versucht, ein Untermenü hinzuzufügen, aber es sieht verzerrt aus. –

Wie ändere ich nur den Hintergrund des mobilen Naves? –

Warum zeigt mein Bootstrap-Menü keine mobile Ansicht

Antwort

Verwandte Themen