移動設備上的自舉導航頭菜單摺疊

Question

由於class="collapse navbar-collapse"（我的假設是否正確？）我的菜單在使用屏幕較小的設備時隱藏。

但是如何獲得某種按鈕，用戶可以選擇該菜單中的任何項目？

JSFiddle

Answer 1

<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> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
\t <div class="container-fluid"> 
 
\t  <!-- Brand and toggle get grouped for better mobile display --> 
 
\t  <div class="navbar-header"> 
 
     <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> 
 
\t  <a class="navbar-brand" href="https://en.wikipedia.org/wiki/International_Organization_for_Standardization" target="_blank"><img src="https://iso.torza.nl/images/iso-logo.png" height="30"></a> 
 
\t  </div> 
 

 
\t \t  <!-- Collect the nav links, forms, and other content for toggling --> 
 
\t \t  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
\t \t  <ul class="nav navbar-nav"> 
 
\t \t   <li><a href="#">Klanttevredenheid</a></li> 
 
\t \t   <li><a href="#">Leveranciersbeoord.</a></li> 
 
\t \t   <li><a href="#">Afwijkingen.</a></li> 
 
\t \t   <li><a href="toolbox.php">Toolboxen</a></li> 
 
\t \t   <li><a href="werkplek.php">Werkplekinspec.</a></li> 
 
\t \t   <li><a href="#">Ongevallen</a></li> 
 
\t \t   <li><a href="#">Functioneringsgesprekken</a></li> 
 
\t \t   <li><a href="#">Verbeterpunten</a></li> 
 
\t \t  </ul> 
 
\t \t  <form class="navbar-form navbar-right" action="" method="get"> 
 
\t \t   <div class="form-group"> 
 
\t \t   <input type="text" class="form-control" placeholder="Zoeken op" name="zoek" value="zoek" > 
 
\t \t   </div> 
 
\t \t   <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
 
\t \t  </form> 
 

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

你錯過這個導航鍵控制

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

我更新了小提琴check here

Answer 2

只需更換以下

<div class="navbar-header"> 
<a class="navbar-brand" href="https://en.wikipedia.org/wiki/International_Organization_for_Standardization" target="_blank"><img src="https://iso.torza.nl/images/iso-logo.png" height="30"></a> 
</div> 

與此

<div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 
     <a class="navbar-brand" href="https://en.wikipedia.org/wiki/International_Organization_for_Standardization" target="_blank"><img src="https://iso.torza.nl/images/iso-logo.png" height="30"></a> 
    </div>