Django项目中Bootstrap折叠导航栏移动端展开后无法收起求助

问题根源及修复步骤 #

1. 重复CSS类导致状态切换异常 #

你的折叠容器class里重复写了两次navbar-collapse：

<div class="collapse navbar-collapse navbar-collapse" id="navbarSupportedContent">

重复类会干扰Bootstrap的折叠状态判断逻辑，导致按钮只能触发展开，无法触发收起。修复：移除其中一个navbar-collapse，保留class="collapse navbar-collapse"即可。

2. 重复引入Bootstrap JS造成冲突 #

你同时加载了bootstrap.bundle.min.js和单独的popper.min.js+bootstrap.min.js。bootstrap.bundle.min.js已经整合了Popper.js和Bootstrap核心JS，重复加载会导致事件绑定冲突，破坏折叠按钮的交互逻辑。修复：只保留bootstrap.bundle.min.js，删除另外两个JS引入。

修复后的完整代码 #

{% load static %}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dynamic Applications Security and Solutions</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static '/css/style.css' %}">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-primary">
        <div class="container-fluid">
          <a class="navbar-brand" href="{% url 'home' %}">DASS</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="{% url 'home' %}">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="{% url 'blog:all_blogs' %}">Blog</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="{% static 'portfolio/Resume.pdf' %}">Resume</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://www.linkedin.com/in/daniel-sholes-1a857713b/">LinkedIn</a>
            </li>
            </ul>
          </div>
        </div>
      </nav>

      <center><img src="/media/portfolio/images/fulllogo.jpg" width="250px" height="250px" class="logo"/></center>

      {% block content %}

      {% endblock %}

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
    </body>
</html>

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