Bootstrap Navbar移动端下拉按钮无响应问题求助

问题描述 #

作为Bootstrap新手，我遇到了一个问题：当页面调整到手机屏幕尺寸时，导航栏的下拉按钮点击后毫无反应。我使用Flask框架的base.html模板，相关代码如下：

<!DOCTYPE HTML>
<html lang="en">

<head>
    <!--Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, name=viewport">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/style.css">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
    <script type="text/javascript" src="/static/javascript.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        ul#menu li {
            display: inline;
        }
    </style>
    {% if title %}
    <title>{{ title }}</title>
    {% else %}
    <title>Finance Tracker</title>
    {% endif %}
</head>

<body>
    <nav class="navbar navbar-expand-sm navbar-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href='#'>Navbar</a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active"><a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a></li>
                <li class="nav-item"><a class="nav-link" href="/allexpenses">All Expenses</a></li>
                <li class="nav-item"><a class="nav-link" href="/allincomes">All Incomes</a></li>
                <li class="nav-item"><a class="nav-link" href="/expenses">Add Expenses</a></li>
                <li class="nav-item"><a class="nav-link" href="/incomes">Add Incomes</a></li>
                <li class="nav-item"><a class="nav-link" href="/goal">Add Goal</a></li>
            </ul>
        </div>
    </nav>
    <div class="container-fluid">
        {% with messages = get_flashed_messages() %}
        {% if messages %}
        {% for message in messages %}
        <div class="alert alert-success">
            {{ message }}
        </div>
        {% endfor %}
        {% endif %}
        {% endwith %}
        {% block content %}{% endblock %}
    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
</body>

</html>

问题解决 #

经排查，问题根源是jQuery、Popper.js和Bootstrap的脚本版本不匹配且部分版本过时：

• 页面引用的Bootstrap CSS版本为4.2.1，但JS版本为4.3.1，版本不一致会导致交互逻辑异常
• 旧版本的slim jQuery缺少Bootstrap交互所需的部分功能

修正方案：统一使用Bootstrap 4.x系列的匹配版本，替换底部的脚本引用为以下内容（确保CSS和JS版本一致）：

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

额外注意：

• 必须保证jQuery、Popper.js、Bootstrap JS的加载顺序正确（jQuery在前，然后Popper.js，最后Bootstrap JS）
• 不要在页面头部提前加载这些依赖脚本，避免DOM未加载完成导致的功能异常

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