Bootstrap 手风琴物品的间隔很奇怪答案

【问题标题】：Bootstrap Accordion Items are Spaced WeirdBootstrap 手风琴物品的间隔很奇怪
【发布时间】：2021-06-23 02:36:33
【问题描述】：

我正在做这个项目并使用 Bootstrap Accordion。似乎我的手风琴项目相互重叠，有时在容器内，有时在其他容器的顶部。

有谁知道如何解决这个问题？谢谢。

我尝试过添加容器，但它似乎把手风琴弄乱了。

我还想在手风琴下方添加空间，但不确定在其下方添加边距或间隔是否会降低响应速度。

截图： Accordion 1`[

*{margin:0;padding:0;}
html {
    min-height: 100%;
    min-width: 100%;
    background-size: cover;
}
body {
    background-image: linear-gradient(rgba(143,25,154,1), rgba(200, 5, 158, 0.8));
    opacity: 1;
    position: relative;
    overflow: scroll;
    background-size: cover;
  }
.sectionOne {
    background-image: url(imageFolder/background.png);
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    background-attachment: fixed;
}
.display-1 {
    margin-top: 200px;
}
.accordion-title {
    font-variant-caps: titling-caps;
    position: absoulte;
}

.accordion-button {
    font-size: 20px;
    font-family: Red Rose;
    color: #FEB7EE !important;
    border: none !important;
}
.accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
    margin-right:0;
    color: rgb(224, 16, 176) !important;
  }
.accordion-button:before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E010B0'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
.accordion-button collapse {
    color: rgb(224, 16, 176);
  }
 .accordion-button:not(.collapsed) {
    color: rgb(224, 16, 176) !important;
    background-color: rgb(254, 183,238, .8);
}
h2 {
    font-family: Red Rose;
    color: #FEB7EE;
    margin-bottom: 50px;
}
h4 {
    font-family: Raleway;
    color: #FEB7EE;
}
p {
    font-family: Raleway;
}

  }
  a {
    color: #73C3E8;
  }
img {
    position: absolute;
}
.backgroundElipse {
    position:center;
    margin-top: 200px;
    margin-left: 50px !important;
}
.btn{
    margin-top: 50px !important;
    margin-left: 25px !important;
    color: #FEB7EE !important;
    background-color: #49276D !important;
    border: none !important;
    font-family: Raleway;
    max-width: 200px !important;
    position: center;
}

<!--html-->
<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">
<!--javascript-->
<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>

<!DOCTYPE html>
<html lang="eng">

<head>
  <link href="https://fonts.googleapis.com/css?family=Red+Rose&display=swap" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.rtl.min.css"
    integrity="sha384-4dNpRvNX0c/TdYEbYup8qbjvjaMrgUPh+g4I03CnNtANuv+VAvPL6LqdwzZKV38G" crossorigin="anonymous">

  <!--title and favicon-->
</head>
<body>
  <div class="container">
    <div class="col-12">
      <!--section1-->
      <div class="sectionOne">
        <div class="row">
          <div class="col-sm-6">
            <!--intro-->
            <div class="row">
              <h2 class="display-1">Raspberry Pi for Designers</h2>
            </div>
            <div class="row">
              <h4 class="display-7">The Raspberry Pi may be a computer smaller than a deck of cards, but you’ll be
                surprised what it can do!</h4>
                <button type="button" class="btn btn-secondary btn-lg" href="#learnMore">Learn More</button>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="row-sm-6">
              <img class="backgroundElipse" src="imageFolder/raspElipse.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

  <!--accordion-->
  
  <div class="accordion accordion-flush" id="accordionFlushExample">
  
    <!--about-->
    <a id="learnMore">
    <div class="accordion-item"></a>
      <h2 class="accordion-header" id="flushAbout">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne" onclick="about"
          ()>
          About
        </button>
      </h2>
      <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body about">
          <p><strong>Raspberry Pi is a</strong> fully featured, low cost, tiny Linux computer that is an easy
            way to learn programming and computing.</p>
        </div>
      </div>
    </div>
    <!--ingredients-->
    <div class="accordion-item">
      <h2 class="accordion-header" id="flushIngredients">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
          What You'll Need
        </button>
      </h2>
      <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">
          <div class="container">
            <div class="col-md-12">
              <div class="col"><img src="" class="img-fluid" alt="raspberry pi icon" width="100" height="100">
              </div>
            </div>
            </h2>
            <div class="col">
              <h3>Raspberry Pi</h3>
            </div>
          </div>
          <p>Go with models 3 and higher.</p>
        </div>
        <img src="" class="img-fluid" alt="hdmi monitor icon" width="100" height="100">
        <h3>HDMI Monitor</h3>
        <p>An HDMI TV works too!</p>
        <img src="" alt="SD card icon" class="img-fluid" width="100" height="100">
        <h3>SD Card</h3>
        <p>Aim for at least 8GB.</p>
        <img src="" class="img-fluid" alt="USB Mouse" width="100" height="100">
        <h3>USB Mouse</h3>
        <p>You can switch to a wireless mouse later.</p>
        <img src="" class="img-fluid" alt="USB Keyboard icon" width="100" height="100">
        <h3>USB Keyboard</h3>
        <p>You can switch to a wireless keyboard later.</p>
        <img src="" class="img-fluid" alt="power supply icon" width="100" height="100">
        <h3>Power Supply</h3>
        <p>Standard 5V USB C or Micro depending on the model.</p>
      </div>
    </div>
  </div>
  <!--SetUp-->
  <div class="accordion-item">
    <h2 class="accordion-header" id="flushSetUp">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
        data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
        Set Up
      </button>
    </h2>
    <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
      data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">
        <h4>Set up your SD card.</h4>
        <p>Install the operating system onto the SD card. </p>
        <a href="https://www.raspberrypi.org/documentation/installation/noobs.md"> Link to download the NOOBS
          Operating
          System </a>
        <h4>Plug everything in.</h4>
        <img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">
        <p>Make sure everything is plugged in before turning it on.</p>
      </div>
    </div>
  </div>
  <!--options-->
  <div class="accordion-item">
    <h2 class="accordion-header" id="flushOptions">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
        data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
        What Can You Do?
      </button>
    </h2>
    <div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour"
      data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">
        <div class="container">
          <div class="row">
            <div class="col-xs-12 text-center">
            </div>
          </div>
          <div class="row">
            <div class="col-sm-8 col-sm-offset-2">
              <div id="random_number1" class="carousel slide youtube-carousel" data-ride="carousel"
                data-interval="false">
                <div class="carousel-inner">
                  <div class="video-container item active">
                    <div class="youtube-video" id='AO89eXKO0c4'></div>
                    <div class="carousel-caption">Video 1</div>
                  </div>
                  <div class="video-container item">
                    <div class="youtube-video" id='6MjRVkm9CF0'></div>
                    <div class="carousel-caption">Video 2</div>
                  </div>
                  <div class="video-container item ">
                    <div class="youtube-video" id='R8poo-zCK9g'></div>
                    <div class="carousel-caption">Video 3</div>
                  </div>
                </div>
                <div class="controls">
                  <a class="left carousel-control" href="#random_number1" data-slide="prev">
                    <div class="left-button">
                      <div class="glyphicon glyphicon-chevron-left"></div>
                    </div>
                  </a>
                  <a class="right carousel-control" href="#random_number1" data-slide="next">
                    <div class="right-button">
                      <div class="glyphicon glyphicon-chevron-right"></div>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--python-->
    <div class="accordion-item">
      <h2 class="accordion-header" id="flushPython">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
          Code with Python
        </button>
      </h2>
      <div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">
          <h4>Open Thonny</h4>
          <p>Use Thonny to create new programs and systems on your Raspberry Pi </p>
          <a href="url"> Link to see what you can do with Python </a>
          <h4>Learn Python</h4>
          <img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">
        </div>
      </div>
    </div>
    <!--accessories-->
    <div class="accordion-item">
      <h2 class="accordion-header" id="flushAccessories">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">
          Add Ons & Accessories
        </button>
      </h2>
      <div id="flush-collapseSix" class="accordion-collapse collapse" aria-labelledby="flush-headingSix"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">
          <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
              <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"
                aria-current="true" aria-label="Slide 1"></button>
              <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
                aria-label="Slide 2"></button>
              <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
                aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
              <div class="carousel-item active" data-bs-interval="10000">
                <img src="..." class="d-block w-100 img-fluid" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>Camera</h5>
                  <p>Take some photos with your raspberry pi.</p>
                </div>
              </div>
              <div class="carousel-item" data-bs-interval="2000">
                <img src="..." class="d-block w-100 img-fluid" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>Touch Screen</h5>
                  <p>Have a fully handheld experience with this screen addition.</p>
                </div>
              </div>
              <div class="carousel-item">
                <img src="https://www.adafruit.com/product/2707" class="d-block w-100"
                  alt="Pimironi Picade Game Controller">
                <div class="carousel-caption d-none d-md-block">
                  <h5>Pimoroni Picade Console Controller</h5>
                  <p>For a retro gaming experience.</p>
                </div>
              </div>
              <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
              </button>
              <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!--sensehat-->
      <div class="accordion-item">
        <h2 class="accordion-header" id="flushSenseHat">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">
            SenseHat
          </button>

        </h2>
        <div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven"
          data-bs-parent="#accordionFlushExample">
          <img src="" class="img-fluid" alt="SenseHat Kiss" width="200" height="250">
          <pre>
  <code>
  from sense_hat import SenseHat
  sense = SenseHat()

  # Define some colours
  r = (255, 0, 0)
  p = (230, 0, 255)
  b = (0, 255, 247)
  
  O = (0, 0, 0)
  X = (255, 255, 0)

  # Get your SenseHat to give you a kiss
  kiss = [
  O, X, X, X, X, X, X, O,
  X, O, O, O, O, O, O, X,
  X, O, O, O, O, O, O, X,
  X, b, b, O, O, b, b, X,
  X, O, O, p, p, O, O, X,
  X, O, r, r, r, r, O, X,
  X, O, O, O, O, O, O, X,
  O, X, X, X, X, X, X, O
  ]
  # Display these colours on the LED matrix
    sense.set_pixels(kiss)
  </code>
  </pre>
        </div>
      </div>
      <!--projects-->
      <div class="accordion-item">
        <h2 class="accordion-header" id="flushSenseHat">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">
            SenseHat Projects
          </button>
        </h2>
        <div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight"
          data-bs-parent="#accordionFlushEight">
          <div class="accordion-body">
            <div class="card-group">
              <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Project 1</h5>
                  <p class="card-text">This will be a cool project idea.</p>
                </div>
              </div>
              <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Project 2</h5>
                  <p class="card-text">Another cool project. </p>
                </div>
              </div>
              <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Project 3</h5>
                  <p class="card-text">Last cool project goes here.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--resources-->
      <div class="accordion-item">
        <h2 class="accordion-header" id="flushResources">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#flush-collapseNine" aria-expanded="false" aria-controls="flush-collapseNine">
            Raspberry Pi Resources
          </button>
        </h2>
        <div id="flush-collapseNine" class="accordion-collapse collapse" aria-labelledby="flush-headingNine"
          data-bs-parent="#accordionFlushNine">
          <div class="accordion-body">
            <ul class="list-group list-group-flush">
              <li class="list-group-item">Link</li>
              <li class="list-group-item">Another Link</li>
              <li class="list-group-item">Another another link</li>
              <li class="list-group-item">Fourth link</li>
              <li class="list-group-item">Last link</li>
            </ul>
          </div>
        </div>
      </div>
      <!--end tag-->
    </div>
  </div>
</body>
<link href="./stylesheet.css" rel="stylesheet" />
<script src="script.js"></script>

</html>

]2`

【问题讨论】：

标签： html css bootstrap-4 accordion bootstrap-accordion

【解决方案1】：

您混合了 Bootstrap 3、4 和 5 个文件。您应该只有一组引导文件。由于您有来自 bootstrap-5 的代码，我假设这就是您想要使用的（不支持 IE11）。在 DOCTYPE 之前和正文结束标记之后有文件。您的一些组件与其他组件重叠，因为您对所有图像使用绝对位置，并为至少一个（backgroundElipse）使用较大的上边距。

我稍微清理了你的文件（删除了你的 img 样式并隐藏了 backgroundElipse）。

<!DOCTYPE html>
<html lang="eng">

<head>
    <link href="https://fonts.googleapis.com/css?family=Red+Rose&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet" />



    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <!--title and favicon-->

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            min-height: 100%;
            min-width: 100%;
            background-size: cover;
        }

        body {
            background-image: linear-gradient(rgba(143, 25, 154, 1), rgba(200, 5, 158, 0.8));
            opacity: 1;
            position: relative;
            overflow: scroll;
            background-size: cover;
        }

        .sectionOne {
            background-image: url(imageFolder/background.png);
            width: 100%;
            height: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% auto;
            background-attachment: fixed;
        }

        .display-1 {
            margin-top: 200px;
        }

        .accordion-title {
            font-variant-caps: titling-caps;
            position: absoulte;
        }

        .accordion-button {
            font-size: 20px;
            font-family: Red Rose;
            color: #FEB7EE !important;
            border: none !important;
        }

        .accordion-button:after {
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
            margin-right: 0;
            color: rgb(224, 16, 176) !important;
        }

        .accordion-button:before {
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E010B0'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
        }

        .accordion-button collapse {
            color: rgb(224, 16, 176);
        }

        .accordion-button:not(.collapsed) {
            color: rgb(224, 16, 176) !important;
            background-color: rgb(254, 183, 238, .8);
        }

        h2 {
            font-family: Red Rose;
            color: #FEB7EE;
            margin-bottom: 50px;
        }

        h4 {
            font-family: Raleway;
            color: #FEB7EE;
        }

        p {
            font-family: Raleway;
        }

        a {
            color: #73C3E8;
        }

        .backgroundElipse {
            display: none;
            position: center;
            margin-top: 200px;
            margin-left: 50px !important;
        }

        .btn {
            margin-top: 50px !important;
            margin-left: 25px !important;
            color: #FEB7EE !important;
            background-color: #49276D !important;
            border: none !important;
            font-family: Raleway;
            max-width: 200px !important;
            position: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="col-12">
            <!--section1-->
            <div class="sectionOne">
                <div class="row">
                    <div class="col-sm-6">
                        <!--intro-->
                        <div class="row">
                            <h2 class="display-1">Raspberry Pi for Designers</h2>
                        </div>
                        <div class="row">
                            <h4 class="display-7">The Raspberry Pi may be a computer smaller than a deck of cards, but you’ll be
                                surprised what it can do!</h4>
                            <button type="button" class="btn btn-secondary btn-lg" href="#learnMore">Learn More</button>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="row-sm-6">
                            <img class="backgroundElipse" src="imageFolder/raspElipse.png" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <!--accordion-->

    <div class="accordion accordion-flush" id="accordionFlushExample">

        <!--about-->
        <a id="learnMore">
            <div class="accordion-item">
        </a>
        <h2 class="accordion-header" id="flushAbout">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne" onclick="about" ()>
                About
            </button>
        </h2>
        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body about">
                <p><strong>Raspberry Pi is a</strong> fully featured, low cost, tiny Linux computer that is an easy
                    way to learn programming and computing.</p>
            </div>
        </div>
    </div>
    <!--ingredients-->
    <div class="accordion-item">
        <h2 class="accordion-header" id="flushIngredients">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                What You'll Need
            </button>
        </h2>
        <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">
                <div class="container">
                    <div class="col-md-12">
                        <div class="col"><img src="" class="img-fluid" alt="raspberry pi icon" width="100" height="100">
                        </div>
                    </div>
                    </h2>
                    <div class="col">
                        <h3>Raspberry Pi</h3>
                    </div>
                </div>
                <p>Go with models 3 and higher.</p>
            </div>
            <img src="" class="img-fluid" alt="hdmi monitor icon" width="100" height="100">
            <h3>HDMI Monitor</h3>
            <p>An HDMI TV works too!</p>
            <img src="" alt="SD card icon" class="img-fluid" width="100" height="100">
            <h3>SD Card</h3>
            <p>Aim for at least 8GB.</p>
            <img src="" class="img-fluid" alt="USB Mouse" width="100" height="100">
            <h3>USB Mouse</h3>
            <p>You can switch to a wireless mouse later.</p>
            <img src="" class="img-fluid" alt="USB Keyboard icon" width="100" height="100">
            <h3>USB Keyboard</h3>
            <p>You can switch to a wireless keyboard later.</p>
            <img src="" class="img-fluid" alt="power supply icon" width="100" height="100">
            <h3>Power Supply</h3>
            <p>Standard 5V USB C or Micro depending on the model.</p>
        </div>
    </div>
    </div>
    <!--SetUp-->
    <div class="accordion-item">
        <h2 class="accordion-header" id="flushSetUp">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                Set Up
            </button>
        </h2>
        <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">
                <h4>Set up your SD card.</h4>
                <p>Install the operating system onto the SD card. </p>
                <a href="https://www.raspberrypi.org/documentation/installation/noobs.md"> Link to download the NOOBS
                    Operating
                    System </a>
                <h4>Plug everything in.</h4>
                <img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">
                <p>Make sure everything is plugged in before turning it on.</p>
            </div>
        </div>
    </div>
    <!--options-->
    <div class="accordion-item">
        <h2 class="accordion-header" id="flushOptions">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
                What Can You Do?
            </button>
        </h2>
        <div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 text-center">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2">
                            <div id="random_number1" class="carousel slide youtube-carousel" data-ride="carousel" data-interval="false">
                                <div class="carousel-inner">
                                    <div class="video-container item active">
                                        <div class="youtube-video" id='AO89eXKO0c4'></div>
                                        <div class="carousel-caption">Video 1</div>
                                    </div>
                                    <div class="video-container item">
                                        <div class="youtube-video" id='6MjRVkm9CF0'></div>
                                        <div class="carousel-caption">Video 2</div>
                                    </div>
                                    <div class="video-container item ">
                                        <div class="youtube-video" id='R8poo-zCK9g'></div>
                                        <div class="carousel-caption">Video 3</div>
                                    </div>
                                </div>
                                <div class="controls">
                                    <a class="left carousel-control" href="#random_number1" data-slide="prev">
                                        <div class="left-button">
                                            <div class="glyphicon glyphicon-chevron-left"></div>
                                        </div>
                                    </a>
                                    <a class="right carousel-control" href="#random_number1" data-slide="next">
                                        <div class="right-button">
                                            <div class="glyphicon glyphicon-chevron-right"></div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--python-->
        <div class="accordion-item">
            <h2 class="accordion-header" id="flushPython">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
                    Code with Python
                </button>
            </h2>
            <div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive" data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">
                    <h4>Open Thonny</h4>
                    <p>Use Thonny to create new programs and systems on your Raspberry Pi </p>
                    <a href="url"> Link to see what you can do with Python </a>
                    <h4>Learn Python</h4>
                    <img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">
                </div>
            </div>
        </div>
        <!--accessories-->
        <div class="accordion-item">
            <h2 class="accordion-header" id="flushAccessories">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">
                    Add Ons & Accessories
                </button>
            </h2>
            <div id="flush-collapseSix" class="accordion-collapse collapse" aria-labelledby="flush-headingSix" data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">
                    <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
                        <div class="carousel-indicators">
                            <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                            <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
                            <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
                        </div>
                        <div class="carousel-inner">
                            <div class="carousel-item active" data-bs-interval="10000">
                                <img src="..." class="d-block w-100 img-fluid" alt="...">
                                <div class="carousel-caption d-none d-md-block">
                                    <h5>Camera</h5>
                                    <p>Take some photos with your raspberry pi.</p>
                                </div>
                            </div>
                            <div class="carousel-item" data-bs-interval="2000">
                                <img src="..." class="d-block w-100 img-fluid" alt="...">
                                <div class="carousel-caption d-none d-md-block">
                                    <h5>Touch Screen</h5>
                                    <p>Have a fully handheld experience with this screen addition.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img src="https://www.adafruit.com/product/2707" class="d-block w-100" alt="Pimironi Picade Game Controller">
                                <div class="carousel-caption d-none d-md-block">
                                    <h5>Pimoroni Picade Console Controller</h5>
                                    <p>For a retro gaming experience.</p>
                                </div>
                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!--sensehat-->
            <div class="accordion-item">
                <h2 class="accordion-header" id="flushSenseHat">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">
                        SenseHat
                    </button>

                </h2>
                <div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven" data-bs-parent="#accordionFlushExample">
                    <img src="" class="img-fluid" alt="SenseHat Kiss" width="200" height="250">
                    <pre>
  <code>
  from sense_hat import SenseHat
  sense = SenseHat()

  # Define some colours
  r = (255, 0, 0)
  p = (230, 0, 255)
  b = (0, 255, 247)
  
  O = (0, 0, 0)
  X = (255, 255, 0)

  # Get your SenseHat to give you a kiss
  kiss = [
  O, X, X, X, X, X, X, O,
  X, O, O, O, O, O, O, X,
  X, O, O, O, O, O, O, X,
  X, b, b, O, O, b, b, X,
  X, O, O, p, p, O, O, X,
  X, O, r, r, r, r, O, X,
  X, O, O, O, O, O, O, X,
  O, X, X, X, X, X, X, O
  ]
  # Display these colours on the LED matrix
    sense.set_pixels(kiss)
  </code>
  </pre>
                </div>
            </div>
            <!--projects-->
            <div class="accordion-item">
                <h2 class="accordion-header" id="flushSenseHat">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">
                        SenseHat Projects
                    </button>
                </h2>
                <div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight" data-bs-parent="#accordionFlushEight">
                    <div class="accordion-body">
                        <div class="card-group">
                            <div class="card">
                                <img src="..." class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Project 1</h5>
                                    <p class="card-text">This will be a cool project idea.</p>
                                </div>
                            </div>
                            <div class="card">
                                <img src="..." class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Project 2</h5>
                                    <p class="card-text">Another cool project. </p>
                                </div>
                            </div>
                            <div class="card">
                                <img src="..." class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Project 3</h5>
                                    <p class="card-text">Last cool project goes here.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--resources-->
            <div class="accordion-item">
                <h2 class="accordion-header" id="flushResources">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseNine" aria-expanded="false" aria-controls="flush-collapseNine">
                        Raspberry Pi Resources
                    </button>
                </h2>
                <div id="flush-collapseNine" class="accordion-collapse collapse" aria-labelledby="flush-headingNine" data-bs-parent="#accordionFlushNine">
                    <div class="accordion-body">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">Link</li>
                            <li class="list-group-item">Another Link</li>
                            <li class="list-group-item">Another another link</li>
                            <li class="list-group-item">Fourth link</li>
                            <li class="list-group-item">Last link</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--end tag-->
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

</body>
</html>

【讨论】：

谢谢！你隐藏img文件有什么原因吗？我试过你的代码，但它似乎不起作用，所有的样式都出错了。也许我做错了什么？
当你说造型有问题的时候，是什么意思？如果你运行我的代码 sn-p，它看起来还好吗？ — 在您的 CSS 中，您已将 img 标记设置为 position: absolute;，这会将图像置于文本之上（隐藏文本）。如果您将图像浮动到左侧 (.float-start) 并将overflow-hidden 添加到accordion-body div，那么您的文本将环绕您的图像并且手风琴将展开以包含图像。因为你的 backgroundElipse 是一个 img，它也是绝对定位的，所以它向下延伸到手风琴部分。
哦，我想要那部分在实际的扉页上，而不是在手风琴里 :) 这就是我的意思，它有点不稳定——丢失了很多我的间距元素和我的颜色新代码中没有手风琴。不知道为什么会这样！我会努力理清位置。 imgur.com/gallery/y0RYFEl