Bootstrap 4导航栏切换按钮显示但无法展开菜单问题求助

DevOps 小满

2026-6-14

问题描述

在Django项目中使用Bootstrap 4，屏幕缩小时导航栏切换按钮正常显示，但点击后无任何反应，菜单无法展开或收起。已确认以下配置：

引入Bootstrap 4.3.1的CSS和JS资源
切换按钮配置了data-toggle="collapse"和data-target="#navbarNav"属性
导航栏类设置正确
按顺序引入了jQuery、Popper.js和Bootstrap JS文件

对应的base.html代码如下：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SkyLog - {% block title %}Home{% endblock %}</title>
    
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
    <link rel="icon" type="image/svg+xml" href="{% static 'images/airplane-svgrepo-com.svg' %}">
</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#"><b>SkyLog</b></a>
        
        
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link mx-3 active" aria-current="page" href="{% url 'home' %}">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link mx-3" href="{% url 'login' %}">Login</a>
            </li>
            <li class="nav-item">
              <a class="nav-link mx-3" href="#">LogBook</a>
            </li>
            <li class="nav-item">
              <a class="nav-link mx-3" href="#">Search</a>
            </li>
            <li class="nav-item">
              <a class="nav-link mx-3" href="#">Analytics</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container mt-4">
        {% block content %}
        <!-- Page content goes here -->
        {% endblock %}
    </div>

    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha384-fQybjgWLrvvRgtW6jwXnDdRjjvQcTbLrR9fOr5bT8i4QgFO44FtfFZ4lAAey7m70"
            crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-Uo5Xkna0FgAq06YLyj2hx5Lu5A5xN1W6zVnHJvaApGsXOMA5ol3KSk2EjPmhoUmR"
            crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy5E2fHk1hCwLlG5OWv9F7JqxMk5DQCVRHsENBO"
            crossorigin="anonymous"></script>

</body>
</html>

可能的原因及解决方法

jQuery加载失败或版本问题：Bootstrap 4.3.1要求jQuery版本≥1.9.1，但需检查浏览器控制台（F12）是否有jQuery加载报错。可尝试更换为Bootstrap官方推荐的对应版本，或改用本地文件引入，规避CDN加载不稳定问题。
Popper.js加载异常：Popper.js是Bootstrap 4折叠、下拉功能的核心依赖，若加载失败会直接导致切换按钮失效。检查控制台是否有Popper相关报错，可更换CDN源或使用本地文件引入。
ID重复冲突：Bootstrap通过data-target="#navbarNav"匹配对应元素，若页面中存在其他id="navbarNav"的元素，会导致事件绑定失效。检查整个页面（包括子模板）是否有重复ID。
Django模板脚本冲突：若子模板中覆盖了base.html的脚本区域，或自定义JS修改了jQuery的$别名（比如使用jQuery.noConflict()），会导致Bootstrap无法调用jQuery。可在Bootstrap脚本前添加var $ = jQuery;修复别名问题。
浏览器缓存干扰：旧的Bootstrap JS缓存可能导致功能异常，按Ctrl+F5强制刷新页面清除缓存后再测试。
脚本加载顺序冲突：确保所有自定义JS或第三方脚本都在Bootstrap JS之后加载，避免提前修改DOM或jQuery对象导致Bootstrap初始化失败。

内容的提问来源于stack exchange，提问作者Calvin