Bootstrap/JQuery Mobile nav funktioniert nicht

Question

Ich scheine Probleme mit Navbars mit Bootstrap und JQuery - auf tatsächlichen Handys und in Chrome Gerät Simulationstool, erscheint die folgende navbar immer noch als eine Desktop-Navigationsleiste (keine mobile Umschaltfläche, nur erscheint, wie es auf jedem normalen Computer würde):

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigationbar" 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 class="navbar-brand" href="#">Brand</a> 
      </div> 

      <div class="collapse navbar-collapse" id="navigationbar"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home <span class="sr-only">(Current)</span></a></li> 
        <li><a href="about.php">About Me</a></li> 
        <li><a href="contact.php">Contact Me</a></li> 
        <li><a href="portfolio.php">Portfolio</a></li> 
       </ul> 

      </div> 
     </div> 
    </nav> 

Entschuldigt, wenn es etwas blendend einfach und dank im Voraus für Ihre Unterstützung sind.

Answer 1

Ich glaube, du verpasst die wichtigsten meta Wert:

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

Answer 2

Bootstrap Dokumentation:

<button type="button" class="navbar-toggle **collapsed**" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 

Ihr Code:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar" aria-expanded="false" aria-controls="navbar"> 

Sie in Ihre Schaltfläche .collapsed fehlen.