ブートストラップcssモバイルでのnavbarが表示されない

Question

モバイル版では、私のページにロゴとボタンの両方を表示したいと思います。私は、デスクトップ上の問題がないなどについて、ナビゲーションバー、ヘッダー内の唯一のロゴは、ボタンの携帯ではない上に表示され、次のコードと一緒に家を

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

：私は現在、ブートストラップナビゲーションバーを使用します。

Answer 1

まず：あなたは

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

を持っていないあなたのhtmlの基本それは

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

第二にする必要があります：ブートストラップは、携帯電話にナビゲーションバー-崩壊を隠していますが、ボタンを使用して切り替えることができます..

ボタンのないfiddle ...

ボタンを含む3210 ..

Answer 2

クラスnavbar-collapse崩壊とid bs-navbarを削除してみます。これらのクラスはブートストラップライブラリに関連しており、ビューポートが画面の特定の幅（モバイルデバイス）を検出すると、メニューがコラプスします。これらのクラスを削除すると、モバイルデバイスであっても常にボタンが表示されます。