bootstrap css navbar auf mobile nicht zeigen

Question

Ich möchte sowohl das Logo und den Button auf meiner Seite in der mobilen Version zeigen. Ich derzeit Bootstrap navbar mit:

 <div class="navbar-header"> 
      <a class="navbar-brand" href="#first" > 
       <img src="assets/logotech500px.png" alt="" style="width:20px;height:20px;"> 
      </a> 
     </div> 
     <div class="navbar-collapse collapse" id="bs-navbar"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a class="page-scroll" class="active" href="#first">Home</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#one">About</a> 
       </li> 
      </ul> 
     </div> 

Mit dem folgenden Code nur das Logo in der navbar-Header wird auf mobilen nicht die Tasten, Haus gezeigt, über usw. ich keine Probleme auf Desktop.

Answer 1

Erstens: Base auf Ihrem HTML Sie nicht, sollten

<nav class="navbar navbar-default"> 
</nav> 

Es

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="#first"> 
     <img src="assets/logotech500px.png" alt="" style="width:20px;height:20px;"> 
    </a> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 

    </div> 
    <div class="navbar-collapse collapse" id="bs-navbar"> 
    <ul class="nav navbar-nav"> 
     <li> 
     <a class="page-scroll" class="active" href="#first">Home</a> 
     </li> 
     <li> 
     <a class="page-scroll" href="#one">About</a> 
     </li> 
    </ul> 
    </div> 
</nav> 

Zweitens haben Sie sein: Bootstrap versteckt die navbar-Zusammenbruch in mobilen, aber Sie können es nun zwischen Taste ..

A fiddle ohne die Schaltfläche ..

A fiddle mit der Schaltfläche ..

Answer 2

Versuchen Sie, die Klassen navbar-collapse collapse und die ID bs-navbar zu entfernen. Diese Klassen beziehen sich auf die bootstraps-Bibliothek und führen zu einem Kollabieren des Menüs, wenn das Ansichtsfenster eine bestimmte Breite des Bildschirms (mobile Geräte) erkennt. Durch das Entfernen dieser Klassen werden die Schaltflächen immer angezeigt, auch in mobilen Geräten.