Leftbar Hamburguer Menu Bootstrap

Question

私のアプリケーションでは、モバイル解像度でページを開くと、左のバーが非表示になりますが、「ハンバーガーボタン」の作業はできません。

私が見つけたすべての解決策は機能しませんでした。ここで

は私のHTMLコードです：それは、左のバーの非表示やハンバーガーボタンのショーですが、ボタンが機能しなかったと、トップバーは中とどまるよう

<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
      <div class="container-fluid"> 
 
       <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
        <div class="container"> 
 
         <div class="navbar-header"> 
 
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#leftSidebar"> 
 
           <span class="icon-bar"></span> 
 
           <span class="icon-bar"></span> 
 
           <span class="icon-bar"></span> 
 
          </button> 
 
          <a class="navbar-brand" href="#">Project Name</a> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="row row-offcanvas row-offcanvas-left row "> 
 

 
       </div> 
 
       <div class="container"> 
 
        <div class="row row-offcanvas row-offcanvas-left"> 
 
         <div class="col-sm-3 col-md-2 sidebar opficio dashMenuFont sidebar-offcanvas" id="leftSidebar" role="navigation"> 
 
          <div class="nav-img"> 
 
           <img src="img/userDefaultImage.png"> 
 
           <p class="opficio-bold userName"><?php echo strtoupper($_SESSION ['nickUser']) ?></p> 
 
           <hr> 
 
          </div> 
 
          <div class="dash-menu"> 
 
           <ul class="nav"> 
 
            <li><a href="dashboard.php?p=home"><span class="glyphicon glyphicon-home"></span> Início</a></li> 
 
            <li><a href="dashboard.php?p=search"><span class="glyphicon glyphicon-search"></span> Buscar</a></li> 
 
            <li><a href="dashboard.php?p=watched"><span class="glyphicon glyphicon-ok-circle"></span> Assistido</a></li> 
 
            <li><a href="#"><span class="glyphicon glyphicon-comment"></span> Bate-papo</a></li> 
 
            <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Config.</a></li> 
 
           </ul> 
 
          </div> 
 
          <hr> 
 
          <div class="nav-logo-bot"> 
 
           <img src="img/nav-logo.png"> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> 
 
         <?php 
 
         $link = filter_input(INPUT_GET, 'p'); 
 
         include $link . ".php"; 
 
         ?> 
 
        </div> 
 
       </div> 
 
      </div>

私のページの上に、私はそれを削除すると、ハンバーガーボタンがdisapearsを持っていた

ありがとう。 Tela web desktop

tela web mobile

Answer 1

私はあなたのコードで

をこの <nav class="navbar navbar-default"> </nav>が必要だと思うあなたはフィドルを作成することができ、ここで https://www.w3schools.com/bootstrap/bootstrap_navbar.asp