Question

所以我有我的导航栏，我做了它，以便在大屏幕中显示导航栏中的项目，但在小屏幕中会显示一个按钮，因此您可以单击它来切换导航栏中的项目。它在大屏幕中起到了它的作用，但是当谈到小屏幕时，它会显示按钮，但当我点击它时它什么也不做。我错过了什么吗？代码如下：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<title>Page Title</title>
</head>
<body>

    <nav class="navbar navbar-light navbar-expand-ms fixed-top">
        <a href="#" class="navbar-brand">Homepage</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"
            aria-expanded="false" aria-controls="navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav ml-auto">
                <li class="navbar-item">
                    <a href="#" class="nav-link">Contact</a>
                </li>
                </ul>
                </div>
                </nav>
</body>
</html>

Answer 1

在 head 部分添加以下元标记

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

请在关闭 body 标签前添加以下代码。

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

为什么我的引导导航栏切换按钮不起作用？

1 个答案: