导航栏切换菜单不适用于手机

Question

当我最小化浏览器或通过移动设备打开页面时，导航栏的切换菜单不起作用，因此没有人可以使用导航栏，这是我的代码所在

<nav class="navbar navbar-inverse">
<div class="container">
    <!-- 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="#app-nav" 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="/github/eco/admin/">ADMIN HOME</a>
    </div>

    <div class="navbar-collapse collapse" id="app-pav">
        <ul class="nav navbar-nav">
            <li class="active"><a href="/github/eco/admin/categories.php">CATEGORIES</a></li>
            <li class="active"><a href="/github/eco/admin/members.php">MEMBERS</a></li>
            <li class="active"><a href="/github/eco/admin/comments.php">COMMENTS</a></li>
            <li class="active"><a href="/github/eco/admin/statics.php">STATISTICS</a></li>
            <li class="active"><a href="#">LOG</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><?php echo $_SESSION['Username']; ?><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="members.php?page=Edit&userId=<?php echo $_SESSION['id']; ?>"><?php echo lang('P-EDIT'); ?></a></li>
                    <li><a href="members.php?page=">SETTINGS</a></li>
                    <li><a href="logout.php">LOGOUT</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Answer 1

错别字是许多开发人员存在的祸根，我很遗憾地告诉您，您是这种可怕野兽的最新受害者。 Bootstrap导航切换的操作方式是您指定目标，该目标与现有的类或ID相关。

在您的代码中，您具有：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-nav" aria-expanded="false">...</button>

但是相关的菜单实际上是：

<div class="navbar-collapse collapse" id="app-pav">...</div>

将data-target更正为与.navbar-collapse的id相同，将得到预期的结果。