Question

我正在练习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

EDIT2：我找到了罪魁祸首，它的链接。我不知道为什么它不起作用，因为我使用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的错误：

Answer 1

如果要将其设为深色，请移除.nav-inverse并添加navbar-dark bg-dark。您还需要在data-toggle按钮上添加.navbar-toggle属性。

以下是导航栏的工作示例

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">	
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-md fixed-top">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
  <a class="navbar-brand" href="#">Ristorante Con Fusion</a>
      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
         <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>
    </nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>	
</body>
</html>

＆＃13;

以下是上述代码的jsbin。

Answer 2

您应该使用Popper.js的UMD版本，它是唯一适用于浏览器的版本：https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js

Answer 3

如果您正在使用NPM，则无需在HTML代码中包含每个库的scripts标签。例如，在Laravel中，您只需要在正文底部添加<script src="{{ asset('js/app.js') }}"></script>。

然后，您应检查package.json文件中是否至少包含以下内容：

"bootstrap": "^4.0.0",
"popper.js": "^1.14",
"jquery": "^3.3.1",

希望这对我有帮助。

Bootstrap 4 Beta 2导航栏切换器无法正常工作

3 个答案: