我正在努力学习引导程序。我从引导程序文档中获取了"Flush"Accordion的代码，但我的代码看起来完全错误。我不明白为什么。我已经链接了CSS样式表和JS Bundle。这就是它的样子。
我根本没有篡改默认代码。我不明白我做错了什么。感谢您的帮助。
这是我的代码：(手风琴在最下面(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-2 fixed-top">
<a href="#home" class="navbar-brand">{ }</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navmenu">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#courses" class="nav-link">Courses</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>
<section class="bg-white text-light p-5 p-lg-0" id="home">
<div class="container">
<div class="d-sm-flex align-items-center">
<div class="text-center text-sm-start">
<h1 class="text-dark">Become a <span class="text-primary">Web Developer</span></h1>
<p class="lead text-dark">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste labore voluptatum nisi non error
impedit alias ullam. Sint numquam quae minus quam, aut rem, sed officiis inventore consectetur
eveniet veniam.
</p>
<button class="btn btn-primary btn-lg">Start Now</button>
</div>
<img src="/images/home.jpg" class="img-fluid w-50 d-none d-md-inline-block" alt="Responsive image">
</div>
</div>
</section>
<section class="bg-dark text-light p-5">
<div class="container d-flex justify-content-center">
<div class="d-md flex justify-content-between align-items-center">
<h3 class="mb-3 mb-md-0 pb-2">Sign Up For Our Newsletter</h3>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter Email" aria-label="Enter email"
aria-describedby="button-subscribe">
<button class="btn btn-primary" type="button" id="button-subscribe">Subscribe</button>
</div>
</div>
</div>
</section>
<section>
<div class="pt-5" id="courses">
<div class="container">
<div class="row text-center">
<div class="col-md">
<div class="card bg-dark text-light p-3">
<div class="h1 mb-3">
<i class="bi bi-laptop"></i>
</div>
<h3 class="card-title mb-3">Virtual</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
asperiores
tempora itaque delectus quod quasi.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light p-3">
<div class="h1 mb-3">
<i class="bi bi-person-square"></i>
</div>
<h3 class="card-title mb-3">Hybird</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
asperiores
tempora itaque delectus quod quasi.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light p-3">
<div class="h1 mb-3">
<i class="bi bi-people"></i>
</div>
<h3 class="card-title mb-3">In-Person</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
asperiores
tempora itaque delectus quod quasi.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container text-center">
<div class="row align-items-center justify-content-between">
<div class="col-md">
<img src="/images/learn.jpg" alt="Learn image" class="img-fluid w-100">
</div>
<div class="col-md p-5">
<h2>Learn The Fundamentals</h2>
<p class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed autem
quibusdam alias
magnam molestias facere.</p>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, culpa libero.
Libero, sunt nam.
Vel voluptatum accusamus cupiditate dolore, distinctio, sapiente perspiciatis harum nihil
expedita repellat amet inventore non deleniti?</p>
<a href="" class="btn btn-primary mt-3">
<i class="bi bi-chevron-right"></i> Read More</a>
</div>
</div>
</div>
</section>
<section class="bg-dark">
<div class="container text-center">
<div class="row align-items-center justify-content-between text-light">
<div class="col-md p-5">
<h2>Build Projects</h2>
<p class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed autem
quibusdam alias
magnam molestias facere.</p>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, culpa libero.
Libero, sunt nam.
Vel voluptatum accusamus cupiditate dolore, distinctio, sapiente perspiciatis harum nihil
expedita repellat amet inventore non deleniti?</p>
<a href="" class="btn btn-primary mt-3">
<i class="bi bi-chevron-right"></i> Read More</a>
</div>
<div class="col-md">
<!-- <img src="" alt="Learn image" class="img-fluid w-100"> -->
</div>
</div>
</div>
</section>
<section>
<div class="container">
<h1 class="text-center">Frequently Asked Questions</h1>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion
body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion
body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false"
aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion
body. Nothing more exciting happening here in terms of content, but just filling up the
space to make it look, at least at first glance, a bit more representative of how this would
look in a real-world application.</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>
这是因为bootstrap@4.0.0在你的链接和下面的脚本中bootstrap@5.1.3
用这个替换顶部的链接
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
这应该使你的Accordion 工作