移動版不能正常工作的引導菜單

Question

我正在使用這個固定的頂級菜單，它可以與桌面正常工作，但是與移動設備無關，因此無法使用移動設備進行操作。

我的代碼如下。我使用bootstrap-3.6和font-awesome。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<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.min.css" rel="stylesheet" /> 
 

 
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="Brand">Brand</a> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="Home"><i class="fa fa-home"></i></a> 
 
     </li> 
 
     <li> 
 
      <span id="f-request-count"></span> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
 
      <i class="fa fa-user-plus"></i> 
 
      </a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <span id="info-count"></span> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="get-info-list"> 
 
      <i class="fa fa-list-alt"></i> 
 
      </a> 
 
      <ul class="dropdown-menu" id="infolist" role="menu"> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">User Name <span class="caret"></span></a> 
 
      <ul class="dropdown-menu" id="userddlist" role="menu"> 
 
      <li><a href="Home"><i class="fa fa-home"></i> Home</a> 
 
      </li> 
 
      <li><a href="Profile"><i class="fa fa-user"></i>Profile</a> 
 
      </li> 
 
      <li><a href="settings"><i class="fa fa-cog"></i> Settings</a> 
 
      </li> 
 
      <li><a href="logout"><i class="fa fa-sign-out"></i> Logout</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <div class="search-pd"> 
 
     <form action="Search" class="form-inline "> 
 
      <input class="form-control srch" id="search-header" type="search" name="name" /> 
 
      <button type="submit"><span class="glyphicon glyphicon-search"></span> 
 
      </button> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

你錯過了移動按鈕標記。

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

你需要做data-target值相同與navbar ID。

完整代碼

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <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> 
       <a class="navbar-brand" href="Brand">Brand</a> 
      </div> 
      <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li> 
         <a href="Home"><i class="fa fa-home"></i></a> 
        </li> 
        <li> 
         <span id="f-request-count"></span> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
          <i class="fa fa-user-plus"></i> 
         </a> 
         <ul class="dropdown-menu" role="menu"></ul> 
        </li> 
        <li class="dropdown"> 
         <span id="info-count"></span> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="get-info-list"> 
          <i class="fa fa-list-alt"></i> 
         </a> 
         <ul class="dropdown-menu" id="infolist" role="menu"></ul> 
        </li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">User Name <span class="caret"></span></a> 
         <ul class="dropdown-menu" id="userddlist" role="menu"> 
          <li> 
           <a href="Home"><i class="fa fa-home"></i> Home</a> 
          </li> 
          <li> 
           <a href="Profile"><i class="fa fa-user"></i>Profile</a> 
          </li> 
          <li> 
           <a href="settings"><i class="fa fa-cog"></i> Settings</a> 
          </li> 
          <li> 
           <a href="logout"><i class="fa fa-sign-out"></i> Logout</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
       <div class="search-pd"> 
        <form action="Search" class="form-inline "> 
         <input class="form-control srch" id="search-header" type="search" name="name" /> 
         <button type="submit"> 
          <span class="glyphicon glyphicon-search"></span> 
         </button> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div>