引导程序 4.1.1 导航栏切换器不工作



一直在尝试解决这个问题一段时间了,导航栏切换按钮图标根本没有出现在我的页面上。我相信所有必要的文件都是直接设置的,并且在开发检查上加载得很好,控制台上也没有错误。 这是代码:

<!DOCTYPE html>
<html lang="en">
<head>
<title>##########</title>
<meta http-equiv="x-ua-compatible" content="ie=edge" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--============Navigation================-->
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<img src="img/####### logo 2.png" class="navbar-brand">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"  aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<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="#">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="#">Product</a></li>
<li class="nav-item"><a class="nav-link" href="#">Support</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

添加popper.min.js

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<img src="img/####### logo 2.png" class="navbar-brand">
<button class="navbar-toggler" style="background-color: green;" type="button" data-toggle="collapse" data-target="#navbarResponsive"  aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<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="#">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="#">Product</a></li>
<li class="nav-item"><a class="nav-link" href="#">Support</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

最新更新