Bootstrap 5 导航栏按钮折叠不起作用

Question

我已经尝试按照有关 bootstrap https://www.youtube.com/watch?v=8KoUzchViH0&t=1457s 的教程进行操作，我认为我按照教程中的方法进行了所有操作，但它不起作用 :c。（显示折叠按钮，但当我按下它时没有任何反应。我从 bootstrap 网站获取模板，所以我认为每个 js 和 css 都应该附加。

(test.css为空，{% load static %} 来自django framework)

{% load static %}
<head>
    <title>Strona testowa / Hobbyist.pl</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <!-- ... -->
    <link rel="stylesheet" href="{% static 'css/test.css' %}">
</head>
<body>
    <header>
        <nav class="navbar navbar-dark bg-dark navbar-expand-md">
            <!-- m (margin) l/r/t/b (x=l+r, y=t+b) - wartość ekranu - wartość marginu d (diaplay) - wartość ekranu - wartość displayu -->
            <h1 class="navbar-brand"><img src="{% static 'logo.png' %}" style="width:30;height:30;" class="mr-2 d-none d-md-inline-block align-bottom "></img>Navbar</h1>
            <!-- order first - toggler przed logo -->
            <button class="navbar-toggler" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse">
                TESTT
            </div>
            
            
        </nav>
    </header>
    
    <!-- predefiniowany container bootstrapa -->
    <!-- maksymalna wielkość (dalej sie nie "rozlewa") -->
    <div class="container">
    <!-- wiersz gx-() gy-() odstępy między elementami-->
        <div class="row gy-0">
                <!-- domyślnie pionowo col-sm-6 col-md-4 col-xl-3 (12 kolumn zajmij 4 w widoku small (576px-767px) możliwości: xs sm md lg xl -->
                <div class="col-sm-6 col-md-5 offset-md-1">
                    <!-- img-fluid = style="max-width:100%;height:auto;" -->
                    <img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
                <div class="col-sm-6 col-md-5">
                    <img class="img-fluid" src="https://www.wykop.pl/cdn/c3201142/comment_HRdOdvKNI54mPFZ37Ilw3L49tj2NfKGE.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <img class="img-fluid" src="https://www.crazynauka.pl/wp-content/uploads/2017/04/pingwin3.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <img class="img-fluid" src="https://antykorupcja.gov.pl/dokumenty/zalaczniki/4/4-16841.jpg"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum ullamcorper quam, vel auctor odio sagittis quis. Fusce auctor tristique odio, sed molestie purus finibus et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor leo ante, at egestas libero tempor iaculis. Donec ligula diam, dignissim et arcu at, sodales mollis mauris. Proin quis magna tellus. Morbi posuere faucibus massa, in molestie sem commodo at. Vivamus iaculis neque erat, eu vulputate mauris cursus sit amet. Praesent vitae justo neque. Nunc et elementum tortor.</p>
                </div>
        </div>
    </div>
    <!-- rozlewa sie w nieskonczonsc 
    <div class="container-fluid">
        
    </div> -->
    <!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
    <!-- ... -->
</body>

Answer 1

您的按钮标记中缺少这两个属性：data-bs-toggle="collapse" & data-bs-target="#test"。此外，在要在单击按钮时展开的 div 标记中添加“id”属性。所以，你的代码是这样的：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#test">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="test">
    TESTT
</div>

记住：- data-bs-target 属性指示单击按钮时要折叠/展开的元素。所以“id”属性的值和“data-bs-target”属性的值将是相同的。在这种情况下，我将“test”作为一个值。

Bootstrap 5 导航栏按钮折叠不起作用

Bootstrap 5 navbar button collapse doesn't work

html

css

web

bootstrap-5