提问人：Matthew Valetsky 提问时间：11/2/2023 最后编辑：Matthew Valetsky 更新时间：11/2/2023 访问量：44
Bootstrap 导航栏向下切换不显示链接
Bootstrap Navbar toggledown not displaying links
问：
我是 bootstrap 的新手，我似乎不明白为什么当调整到手机屏幕的大小时，出现的下拉开关没有做任何事情。
这是我的导航栏代码：
<!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,[email protected],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/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
我也在使用 flask，这是 base.html 模板，尽管我认为这不应该影响引导程序。 任何帮助将不胜感激！
解决：
jquery、Popper.js 和 Bootstrap 的脚本标签已过时。
答：
-1赞
Moncrick
11/2/2023
#1
尝试更改 3 个最终脚本，根据 bootstrap 4 文档，使用这些脚本：
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
评论