我正在练习Bootstrap,并在我的网页上添加了一个导航栏.然而,导航栏切换器既不适用于小屏幕,也不显示图标navbar-toggler-icon.

这是我的导航栏代码：

<nav class="navbar navbar-inverse navbar-expand-md fixed-top">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
            <span class="navbar-toggler-icon"></span>
        </button>  
       <a class="navbar-brand" href="#">Ristorante Con Fusion</a>
       <div class="collapse navbar-collapse" id="Navbar">
            <ul class="navbar-nav">
                <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>   
        </div>         
    </div>
</nav>

我已经在互联网上搜索过,发现我可能会错误地放置jquery,但我已经仔细检查过,发现我已按照以下顺序在主体底部添加了javascript：

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

我还验证了浏览器正在获取javascript文件,如下所示：

我做错了什么,我该如何解决？

谢谢.

编辑：link到jsfiddle

编辑2：我找到了罪魁祸首,它的链接.我不知道为什么它不起作用,因为我使用npm添加它并且package.json中的依赖项显示如下：

{
 "name": "confusion",
 "version": "1.0.0",
 "description": "This is a website for Ristorante Con Fusion",
 "main": "index.html",
 "scripts": {
 "start": "npm run lite",
 "test": "echo \"Error: no test specified\" && exit 1",
 "lite": "lite-server"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "lite-server": "^2.3.0"
 },
 "dependencies": {
 "bootstrap": "^4.0.0-beta.2",
 "font-awesome": "^4.7.0",
 "jquery": "^3.2.1",
 "popper.js": "^1.12.6"
 }
 }

编辑3：控制台中关于popper发生以下错误：

最佳答案 您应该使用Popper.js的UMD版本,它是唯一可以在浏览器上运行的版本：
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js