Django中Bootstrap导航栏折叠样式异常问题求助

我用HTML、CSS和Bootstrap在Django中制作导航栏，窄屏折叠功能已实现，但点击菜单按钮后，菜单展开样式怪异且宽度过大。

点击菜单前：

按住点击菜单时：

当前代码 #

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
    <title>{%block title%}Base{%endblock%}</title>
</head>

<body>
<style>
    #github {
        margin-left: -4;
        margin-right: 10;
    }

    #busqueda {
        margin: auto;
    }

    #logout {
        margin-left: 5;
    }
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a id="github" href="https://github.com/pabsanort2/hongOS" target="_blank" rel="noopener noreferrer"><img
            src="{% static 'github.png' %}" alt="enlace github"></a>
    <a class="navbar-brand" href="/home">HongOS</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
        aria-controls="navbar" aria-expanded="false">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/home">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="/clasificar">Clasificar <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="/info">Info <span class="sr-only">(current)</span></a>
            </li>
        </ul>
    </div>
    <ul class="navbar-nav mr-auto" id="busqueda">
        <form class="form-inline my-2 my-lg-0" method="POST" action="{%url 'busqueda'%}">
            {%csrf_token%}
            <input class="form-control mr-sm-2" type="search" placeholder="Buscar hongos" aria-label="Search"
                name="busqueda">
            <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit"><svg
                    xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-search" viewBox="0 0 16 16">
                    <path
                        d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                </svg></button>
        </form>
    </ul>

    <a id="logout" type="button" class="btn btn-outline-danger" href="/logout">Logout</a>
</nav>
{% block content %}{% endblock %}

问题原因与修复方案 #

核心问题 #

1. 未引入Bootstrap依赖文件：Bootstrap的折叠组件需要自身CSS和JS支持，缺失会导致样式和功能异常。
2. CSS单位缺失：自定义样式中的margin值未加单位（如-4、10），浏览器无法正确解析。
3. 布局结构错误：搜索栏和Logout按钮未放入折叠容器，窄屏时会与展开菜单挤在一起，破坏布局。

修正后代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
    <title>{%block title%}Base{%endblock%}</title>
</head>
<body>
<style>
    #github {
        margin-left: -4px;
        margin-right: 10px;
    }

    #busqueda {
        margin: auto;
    }

    #logout {
        margin-left: 5px;
    }
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a id="github" href="https://github.com/pabsanort2/hongOS" target="_blank" rel="noopener noreferrer"><img
            src="{% static 'github.png' %}" alt="enlace github"></a>
    <a class="navbar-brand" href="/home">HongOS</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
        aria-controls="navbar" aria-expanded="false">
        <span class="navbar-toggler-icon"></span>
    </button>
    <!-- 统一折叠容器，包含所有导航元素 -->
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/home">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="/clasificar">Clasificar <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="/info">Info <span class="sr-only">(current)</span></a>
            </li>
        </ul>
        <!-- 调整搜索栏容器类，大屏时靠右对齐 -->
        <ul class="navbar-nav ml-auto" id="busqueda">
            <form class="form-inline my-2 my-lg-0" method="POST" action="{%url 'busqueda'%}">
                {%csrf_token%}
                <input class="form-control mr-sm-2" type="search" placeholder="Buscar hongos" aria-label="Search"
                    name="busqueda">
                <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit"><svg
                        xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-search" viewBox="0 0 16 16">
                        <path
                            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                    </svg></button>
            </form>
        </ul>
        <!-- 将Logout按钮移入折叠容器，窄屏时统一展示 -->
        <a id="logout" type="button" class="btn btn-outline-danger ml-2" href="/logout">Logout</a>
    </div>
</nav>
{% block content %}{% endblock %}

<!-- 引入jQuery和Bootstrap JS，保证折叠功能正常 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关键修改点 #

1. 添加Bootstrap的CSS和JS依赖文件，确保组件样式和交互正常。
2. 补全CSS中margin值的px单位，修复样式解析错误。
3. 将搜索栏和Logout按钮移入折叠容器，窄屏时与导航菜单统一展开；调整搜索栏容器类为ml-auto，优化大屏布局。

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