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

【问题标题】：Why isn't my bootstrap navbar-toggler button working?为什么我的引导导航栏切换按钮不起作用？
【发布时间】：2021-04-22 04:05:07
【问题描述】：

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

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

【问题讨论】：

您没有包含所需的 JavaScript 文件
@j08691 这些文件是什么？比如，我读过一些内容，“你可以在不使用 javascript 的情况下为移动设备制作引导导航栏隐藏/显示。”你能详细说明一下吗？

标签： html bootstrap-4 navbar

【解决方案1】：

在头部添加以下元标记

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

【讨论】：

非常感谢，我添加了该代码，现在可以使用了，谢谢！
很高兴知道它解决了您的问题。请查看编辑后的答案...
是...对于移动设备，此元标记需要响应能力
在css-tricks.com/snippets/html/responsive-meta-tag查看更多详情