bootstrap navbarがモバイルに表示されないトグル

Question

私はTwitterのブートストラップ3を使用していて、ナビゲーションバーに問題があります。私が画面サイズをモバイルサイズにリサイズし、トグルボタンをクリックしてメニューを展開すると、何も起こりません。あなたはbuttondata-target属性で#を見逃している

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 

    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right "> 
      <?php 
      $SQL = "SELECT * from Categories WHERE cat_top='1';"; 
      $result = $db->execute($SQL); 
      while($row = $result->fetch_assoc()){ 
      $cat_name = $row['cat_name']; 
      $cat_id = $row['cat_id']; 
      ?> 
      <li class="pull-right"> <a href="קטגוריה-<?php echo $cat_id;?>"><?php echo $cat_name; ?></a></li> 
      <?php } ?> 
      <li class="pull-right"><a href="">אודות</a></li> 

     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

Answer 1

、#は

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 

    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right "> 
      <?php 
      $SQL = "SELECT * from Categories WHERE cat_top='1';"; 
      $result = $db->execute($SQL); 
      while($row = $result->fetch_assoc()){ 
      $cat_name = $row['cat_name']; 
      $cat_id = $row['cat_id']; 
      ?> 
      <li class="pull-right"> <a href="קטגוריה-<?php echo $cat_id;?>"><?php echo $cat_name; ?></a></li> 
      <?php } ?> 
      <li class="pull-right"><a href="">אודות</a></li> 

     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

このフィドルを参照

id属性をターゲットにする必要がある https://jsfiddle.net/grassog/gvpg6k47/