Bootstrap 4.3 Navbar-Toggler默认展开无法收起问题求助

我参考Bootstrap 4.3的Navbar示例实现移动端适配的Navbar-Toggler功能，官网示例运行正常，但部署到自己站点后，下拉菜单默认处于展开状态，且点击切换按钮无法收起。怀疑是依赖引入冲突导致，以下是当前的依赖引入代码，求排查解决：

当前部分代码 #

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="{{ url_for('static', filename='logo/icon_logo.png') }}">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    
    <link rel="stylesheet" href="static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="static/css/2bootstrap.min.css" />
    <link rel="stylesheet" media="screen" href="static/css/main.css"> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <title>Mansura</title>
</head>

当前底部代码 #

<script src="https://unpkg.com/@popperjs/core@2"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="static/js/bootstrap-js/bootstrap.js"></script>

问题根源与解决方案 #

核心问题：多版本Bootstrap依赖冲突 #

你同时引入了Bootstrap 3.1.1、3.3.4、4.3三个版本的JS/CSS，不同版本的组件逻辑、类名定义存在差异，会互相覆盖导致功能异常；另外Popper.js v2是为Bootstrap 5设计的，和Bootstrap 4.x不兼容，旧版jQuery也可能存在兼容问题。

修正步骤 #

1. 清理重复/不兼容依赖：移除所有Bootstrap 3.x的CSS/JS引用，删除重复的Bootstrap CSS文件（比如2bootstrap.min.css）。
2. 引入Bootstrap 4.3的正确依赖链：
   • jQuery：使用3.x版本（Bootstrap 4.3要求jQuery≥1.9.1，3.x版本兼容性更好）
   • Popper.js：使用1.x版本（和Bootstrap 4.x兼容，避免用v2）
   • 只保留一套Bootstrap 4.3的CSS和JS

修正后的代码示例 #

修正后的

<head>
    <meta charset="utf-8">
    <!-- 移动端适配必须的viewport元标签，确保响应式布局生效 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="{{ url_for('static', filename='logo/icon_logo.png') }}">
    <!-- 引入jQuery 3.x稳定版 -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- 仅引入Bootstrap 4.3的官方CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- 自定义样式放在Bootstrap之后，确保优先级 -->
    <link rel="stylesheet" media="screen" href="static/css/main.css"> 
    <title>Mansura</title>
</head>

修正后的底部

<!-- 引入Bootstrap 4.3兼容的Popper.js 1.x版本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<!-- 引入Bootstrap 4.3的官方JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- 自定义JS放在Bootstrap之后引入 -->
<!-- <script src="static/js/your-custom-script.js"></script> -->

额外检查 #

确保你的Navbar HTML结构符合Bootstrap 4.3规范：

• 下拉菜单容器必须带有collapse navbar-collapse类，这样初始状态才会收起
• 切换按钮的data-target属性要和下拉容器的id对应

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