Bootstrap 手风琴麻烦

Question

我正在努力学习bootstrap。我从 bootstrap 文档中获取了 'Flush' 手风琴的代码，但我的代码看起来完全错误。我不明白为什么。我已经链接了 CSS 样式表和 JS 包。 This is what it looks like.

我完全没有篡改默认代码。我不明白我做错了什么。感谢任何帮助，谢谢。

这是我的代码：（手风琴在最底部）

<!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">&lcub; &rcub;</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>

Answer 1

这是因为您的 link 中有 bootstrap@4.0.0 并且在下面的脚本中有 bootstrap@5.1.3

将顶部的 link 替换为这个

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

这应该让你的手风琴工作

Bootstrap 手风琴麻烦

Bootstrap Accordion Trouble

html

css

bootstrap-5