html - Bootstrap 5导航栏按钮折叠不起作用
问题描述
我试图按照关于引导程序https://www.youtube.com/watch?v=8KoUzchViH0&t=1457s的教程进行操作， 我认为我在教程中做了所有事情，但它不起作用：c。（显示折叠按钮，但是当我按下它时，什么也没有发生。我从引导网站获取模板，所以我认为每个 js 和 css 都应该附加。
（test.css 为空白，{% load static %} 来自 django 框架）
{% 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>解决方案
您的按钮标签中缺少这两个属性：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”属性的值将是相同的。在这种情况下，我将“测试”作为一个值。