我的 Bootstrap 4 导航栏在移动视图中没有折叠

Question

我无法打开导航栏选项，它只是一个实心按钮，单击时会在其周围形成一个环。我尝试了一些不同的解决方案，包括添加和删除脚本、更改导航栏属性等

这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pan Indus Exim Enterprises</title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
    <link href="style.css" rel="stylesheet">
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="img/vdnewlogo.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#ab">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#con">Connect</a>
            </li>
        </ul>
    </div>
</div>
</nav>

Answer 1

首先，请确保您的计算机已连接到互联网。这是为了确保您的浏览器加载和保存 CDN。

其次，打开Developer tools ctrl + shift + i（chrome键盘快捷键）并在选项卡式控制台上检查没有错误。如果有报错，请先修复（最多的问题是CDNlink打不开或者输入错误）

如果移动设备上的 Navbar 仍未折叠，请清除浏览器数据 ctrl + shift + del（chrome 键盘快捷键）并重新加载页面。

Note: It's not recommended or bad practice to embed your script to tab head, please embed them to the end of the tag body or before </body>

Answer 2

只要确保你有 JavaScript cdn 和像 Chrome 这样合适的浏览器，它就可以工作，有时 bootstrap 不支持其他浏览器。还要确保您已连接到 Internet 尤其是当您使用 Cdn 时。

我的 Bootstrap 4 导航栏在移动视图中没有折叠

My Bootstrap 4 Navbar isn't collapsing in Mobile View

html

jquery

css

navbar

jquery-mobile-navbar