html - 移动设备的引导菜单不起作用

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>