个人中心
gpt4 book ai didi

jquery - Bootstrap 4.1.1 导航栏切换器不起作用

转载 作者：行者123 更新时间：2023-12-01 07:40:20 25 4
gpt4 key购买 nike

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

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

关于jquery - Bootstrap 4.1.1 导航栏切换器不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50984020/

25 4 0
文章推荐： python - 如何使用 Matplotlib 缩放体素尺寸？
文章推荐： operator-precedence - 为什么语言具有运算符优先级？
文章推荐： NPAPI 插件不显示在大约 :plugins in google chrome
文章推荐： PHP-上传前重命名文件