我的Bootstrap 4导航栏在Mobile View中没有崩溃

编程问答 2022-08-11

问题描述

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

这是代码：

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

解决方法

首先，请确保您的计算机已连接到Internet。这可确保您的浏览器加载和保存CDN。

第二，打开开发者工具ctrl + shift + i（Chrome键盘快捷键），然后在选项卡式控制台上检查是否没有错误。如果出现错误消息，请先进行修复（最大的问题是CDN链接不起作用或键入错误）。

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

注意：不建议将脚本嵌入标签头，这是不建议或的不当做法，请将脚本嵌入标签主体的末尾或</body>

之前
,

只要确保您有 JavaScript cdn 和合适的浏览器（如 Chrome），它就可以工作，有时引导程序不支持其他浏览器。还要确保您已连接到 Internet，尤其是当您使用 Cdn 时。

htmljqueryjquery-mobile-navbarnavbarnavbar