Django使用本地jQuery搭配Bootstrap时导航栏无响应问题求助

• 核心问题原因：{% bootstrap_javascript jquery='full' %} 模板标签默认会同时执行两个操作：加载远程jQuery资源、加载Bootstrap交互JS文件。你替换本地jQuery后如果直接删除了这个标签，会导致Bootstrap自身的交互JS缺失，导航栏的折叠功能自然无法触发，这也是控制台没有报错但按钮无响应的直接原因。
• 你后续手动引入Bootstrap CDN的JS文件后功能恢复，也验证了是Bootstrap JS缺失的问题，出现重复加载是因为你同时保留了模板标签的加载逻辑和手动引入的CDN资源。

正确配置步骤 #

调整base.html的资源引入逻辑即可：

1. 确保模板头部已经加载必要的模板标签

{% load static %}
{% load bootstrap4 %}

2. head区域保留Bootstrap CSS加载逻辑，无需修改

{% bootstrap_css %}

3. 在body末尾按顺序引入JS资源，先加载本地jQuery，再修改bootstrap_javascript标签的参数，避免重复加载jQuery

<!-- 先引入本地jQuery -->
<script type="text/javascript" src="{% static 'main_app/scripts/jQuery.js' %}"></script>
<!-- 将jquery参数设为none，标签只会加载Bootstrap自身的JS，不会再加载jQuery -->
{% bootstrap_javascript jquery='none' %}

注意事项 #

• 必须保证jQuery的引入顺序在bootstrap_javascript标签之前，否则Bootstrap JS初始化时找不到jQuery会失效。
• 不需要再手动引入任何Bootstrap JS的CDN资源，bootstrap_javascript标签会自动加载和你当前安装的django-bootstrap4版本匹配的Bootstrap JS文件，不会出现版本兼容问题。

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