Bootstrap折叠面板按钮无法适配accordion-item容器问题

问题源于浏览器默认的h2标签样式与Bootstrap Accordion的样式冲突，导致按钮无法完全填充标题栏区域。通过添加自定义CSS即可修正：

修正后的完整代码 #

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

<style>
/* 修正Accordion标题栏与按钮的适配问题 */
.accordion-header {
  padding: 0;
  margin: 0;
}
.accordion-button {
  width: 100%;
  border-radius: var(--bs-accordion-inner-border-radius) !important;
}
</style>

<div class="modal fade show d-block" id="ot" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ott">Other Scripts</h5>
        
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>
        
      <div class="modal-body">
        <i> To close this page, click the X button, or the "Close" button to close. Clicking off the pop-up will not work. </i>
        <h2> Other Scripts </h2>
        
        <div class="accordion" id="accordionExample">
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                Nitro Generator
              </button>
            </h2>
            
            <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
              <div class="accordion-body">
                <h4> Disclaimer </h4>
                <p> Note that an actual working key would take over a billion years to find. </p>
                <br>
                <p> <a href="/media/files/nitro.py" download="">Nitro Generator (Python)</a> <a href="/media/files/verify.py" download="">Nitro Verify (Python)</a> by nasus</p>
              </div>
            </div>
          </div>
          
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Kahoot Scripts
              </button>
            </h2>
            
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                <p> <a href="/media/files/id.py" download="">Kahoot Answers (Python)</a> <a href="/media/files/lobby.py" download="">Kahoot Lobby Flood (Python | KahootPY | Threading)</a> by Nasus</p>
              </div>
            </div>
          </div>
          
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingThree">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Other Scripts
              </button>
            </h2>
            
            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                <p> <a href="/media/files/user_agents.txt" download="">User Agents (TXT)</a>
                  <a href="/media/files/invite.py" download="">Invite Generator and Checker (Python)</a>
                  <a href="/media/files/webhook.py" download="">Webhook Deleter (Python)</a>
                  <a href="/media/files/tiktok.py" download="">TikTok Username Checker (Python)</a>
                  <a href="/media/files/bot.py" download="">Bot's Code (Python)</a> by Nasus</p>
                <p>
                  <a href="/media/files/basey64.py" download="">Base64 (Python)</a>
                  <a href="/media/files/Windows_Screen_Grabber.py" download="">Windows Screen Grabber V1 (Python)</a>
                  <a href="/media/files/Windows_Screen_Grabber_V2.py" download="">Windows Screen Grabber V2 (Python)</a> by 𝙂𝙝𝙤𝙨𝙩.𝙄𝙣𝙏𝙝𝙚.𝙎𝙝𝙚𝙡𝙡</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button></div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

修正说明 #

• 清除accordion-header（绑定在h2标签上）的默认内外边距，让标题栏与按钮完全贴合。
• 强制设置accordion-button宽度为100%，确保按钮填满整个标题栏区域，同时保留Bootstrap原生的圆角样式。

内容的提问来源于stack exchange，提问作者Alex Toucan