ナブバーNavbarのトグルメニューが開かない

djangoでサンプルサイトを作っています。
ＨＴＭＬ構成画面で、ナヴバーを配置したのですが、トグルメニューが開かず困っております。
レスポンシブで画面表示を小さくした際に、ハンバーガーメニューに格納されたときに
クリックしても反応がありません。
教示いただきますと幸いです。

HTML
1base.html
2
3{% load static %}
4<html lang="ja">
5  <head>
6    <meta charset="utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <title>{% block title %}タイトル{% endblock %}</title>
9    <script src="https://js.stripe.com/v3/"></script>
10    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
11    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
12    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
13    <link rel="stylesheet" href="{% static 'style.css' %}">
14    <script src="{% static 'main.js' %}"></script>
15</head>
16<body>
17    <div class="wrapper">
18    <nav class="navbar navbar-expand-sm navbar-dark bg-dark mt-3 mb-3">
19    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation">
20        <span class="navbar-toggler-icon"></span>
21    </button>
22    <a class="navbar-brand" href="{% url 'samplehome' %}">TOP</a>
23    <div class="collapse navbar-collapse">
24        <ul class="navbar-nav">
25            <li class="nav-item">
26                <a class="nav-link" href="{% url 'samplestatus' %}">ステータス</a>
27            </li>
28        </ul>
29        <ul class="navbar-nav ml-auto">
30            <li class="nav-item">
31            <p class="navbar-text"> {{ user }}でログインしています。</p>
32            </li>
33            <li class="nav-item">
34                <a class="nav-link" href="{% url "account_logout" %}">ログアウト</a>
35            </li>
36        </ul>
37    </div>
38</nav>    
39                
40
41{% block content %}
42
43{% endblock %}
44
45<div class="push"></div>
46
47    <footer class="py-2 bg-dark">
48        <p class="m-0 text-center text-white">Copyright &copy;サンプル株式会社</p>
49    </footer>
50</div>
51</body>
52<!-- Optional JavaScript -->
53<!-- jQuery first, then Popper.js, then Bootstrap JS -->
54<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
55<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
56<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
57
58</html>

CSS
1.wrapper{
2    min-height: 100vh;
3    position: relative;
4    padding-bottom: 120px;
5    box-sizing: border-box;
6}
7
8footer{
9    width: 100%;
10    background-color: #89c7de;
11    color: #fff;
12    text-align: center;
13    padding: 30px 0;
14    margin-bottom: 200px;
15    position: absolute;
16}
17.push {
18    height: 200px;
19  }
20

生成されたHTML

HTML
1
2
3
4<html lang="ja">
5  <head>
6    <meta charset="utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <title>タイトル</title>
9    <script src="https://js.stripe.com/v3/"></script>
10    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
11    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
12    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
13    <link rel="stylesheet" href="/static/style.css">
14    <script src="/static/main.js"></script>
15</head>
16<body>
17    <div class="wrapper">
18    <nav class="navbar navbar-expand-sm navbar-dark bg-dark mt-3 mb-3">
19    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation">
20        <span class="navbar-toggler-icon"></span>
21    </button>
22    <a class="navbar-brand" href="/">TOP</a>
23    <div class="collapse navbar-collapse">
24        <ul class="navbar-nav">
25            <li class="nav-item">
26                <a class="nav-link" href="/">ステータス</a>
27            </li>
28            <li class="nav-item">
29                <a class="nav-link" href= "/users/mypage/">マイページ</a>
30            </li>
31            <li class="nav-item">
32                <a class="nav-link" href= "/users/policy/">利用規約</a>
33            </li>
34            
35
36            
37
38        </ul>
39        
40
41
42        <ul class="navbar-nav ml-auto">
43            <li class="nav-item">
44            <p class="navbar-text"> ****でログインしています。</p>
45            </li>
46            <li class="nav-item">
47                <a class="nav-link" href="/accounts/logout/">ログアウト</a>
48            </li>
49        </ul>
50    </div>
51</nav>    
52                
53
54
55
56
57    <div class="container mt-5">
58      
59        <h4>*****のステータス:</h4>
60        <div class="card" style="width: 18rem;">
61          <div class="card-body">
62            <h5 class="card-title">********</h5>
63            <p class="card-text">
64              *********
65            </p>
66          </div>
67        </div>
68
69
70      
71    </div>
72
73
74<div class="push"></div>
75
76    <footer class="py-2 bg-dark">
77        <p class="m-0 text-center text-white">Copyright &copy; サンプル株式会社</p>
78    </footer>
79</div>
80</body>
81<!-- Optional JavaScript -->
82<!-- jQuery first, then Popper.js, then Bootstrap JS -->
83<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
84<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
85<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
86
87</html>

m.ts10806

2021/09/25 09:24 編集

css設定に末尾に[ / ]が入ってますが、これは？本当に入ってるならCSS構文エラーです（CSSはエラーを表示してくれませんが、ちょっと正しくない記述があると全部動かなくなったりします） https://jigsaw.w3.org/css-validator/#validate_by_input

yayaya22

2021/09/25 15:19

すいません、こちらに載せるときにコメントを消去したつもりが「/」が残ったままになっておりました。文章をリライトいたしました。エラーは引き続き出ています。

surface_0

2021/10/05 10:54

ブラウザのソース表示で確認できるコンパイル済みのコードを提示できますか？

yayaya22

2021/10/09 15:23

それはlocalhostサーバーで通したもので、「htmlソースを表示する」で構いませんか？

surface_0

2021/10/11 02:14

> それはlocalhostサーバーで通したもので、「htmlソースを表示する」で構いませんか？はい、それでOKです。検証してみます。

行動規範の内容に同意します

回答1件

ベストアンサー

まず、バージョンの異なるbootstrapとjQueryが2つ同時に読み込まれてしまっているので、
いずれか片方を削除してください。バージョンの新しい方を残せばいいかと。

そして、.navbar-togglerで指定している対象要素が#navbarNav4という存在しないものになっているので、
リファレンスに倣って、.navbar-collapseの要素にnavbarSupportedContentというIDを振って、
.navbar-togglerの属性もそれに対応させます。
Navbar - Bootstrap 4.5 - 日本語リファレンス

html
1<body>
2    <div class="wrapper">
3    <nav class="navbar navbar-expand-sm navbar-dark bg-dark mt-3 mb-3">
4    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
5        <span class="navbar-toggler-icon"></span>
6    </button>
7    <a class="navbar-brand" href="/">TOP</a>
8    <div class="collapse navbar-collapse" id="navbarSupportedContent">
9        <ul class="navbar-nav">
10            <li class="nav-item">