Bootstrap4：导航栏切换按钮不起作用

Question

While reducing size fo the window and buttons on navbar disappears and the toggle button is showing up but does not work to display the drop down menu Link for jQuery and other stuff are copy-pasted form Bootstrap website the same with bootstrap link在减小 window 的大小时，导航栏上的按钮消失，切换按钮显示，但无法显示下拉菜单 jQuery 的链接和其他内容是从引导网站复制粘贴的，与引导链接相同

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>29er team POL</title>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'css/my_style.css' %}"/>

</head>
<body>
<div class="jumbotron">
    <div class="container">
        <nav class="navbar navbar-expand-md navbar-light bg-light">
            <a class="navbar-brand" href="{% url 'index' %}">
                <img src="{% static 'images/logo_1.png' %}" width="100" height="60" alt="">
            </a>
            <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>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'homepage:klasa' %}">Klasa 29er</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'homepage:kluby' %}">Kluby</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'homepage:kalendarz' %}">Kalendarz regat</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Archiwum wyników</a>
                    </li>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">coś</a>
                    </li>

                </ul>
            </div>
        </nav>
    </div>

</div>

</body>
</html>

Answer 1

on the <button> you have data-target="#navbarSupportedContent" but there is no div with that ID在<button>你有 data-target="#navbarSupportedContent" 但没有具有该 ID 的 div

change this from:将其更改为：

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

change it to:将其更改为：

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

complete snippet:完整的片段：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="{% url 'index' %}"> <img src="{% static 'images/logo_1.png' %}" width="100" height="60" alt=""> </a> <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> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="{% url 'homepage:klasa' %}">Klasa 29er</a> </li> <li class="nav-item active"> <a class="nav-link" href="{% url 'homepage:kluby' %}">Kluby</a> </li> <li class="nav-item active"> <a class="nav-link" href="{% url 'homepage:kalendarz' %}">Kalendarz regat</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Archiwum wyników</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">coś</a> </li> </ul> </div> </nav>

Bootstrap4：导航栏切换按钮不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-06-25 00:24:01

Bootstrap4：导航栏切换按钮不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-06-25 00:24:01

解决方案1
1 已采纳 2020-06-25 00:24:01