我的自举式手风琴没有按预期伸缩

如何解决我的自举式手风琴没有按预期伸缩

我正试图在此网页上添加引导手风琴，但不确定这些按钮为什么不起作用。

我的代码：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<div class="accordion" id="myAccordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapSEOne">HTML5</button>
      </h2>
    </div>
    <div id="collapSEOne" class="collapse show" data-parent="#myAccordion">
      <div class="card-body">
        HTML5 is a markuP Language used for structuring and presenting content on the World Wide Web. It is the fifth and latest major version of HTML that is a World Wide Web Consortium (W3C) recommendation.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo">CSS3</button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#myAccordion">
      <div class="card-body">
        CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2. 1. It brings a lot of long-awaited novelties,like rounded corners,shadows,gradients,transitions or animations,as well as new layouts like multi-columns,flexible Box or grid layouts.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree">Responsive Design</button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" data-parent="#myAccordion">
      <div class="card-body">
        Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website,depending on the screen size and orientation of the device being used to view it. ... In responsive design,page elements reshuffle
        as the viewport grows or shrinks.
      </div>
    </div>
  </div>
</div>

解决方法

添加bootstrap 4和js文件使用

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

</head>

<body>
  <div class="accordion" id="myAccordion">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h2 class="mb-0">
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne">HTML5</button>
        </h2>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#myAccordion">
        <div class="card-body">
          HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and latest major version of HTML that is a World Wide Web Consortium (W3C) recommendation.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h2 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo">CSS3</button>
        </h2>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#myAccordion">
        <div class="card-body">
          CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2. 1. It brings a lot of long-awaited novelties,like rounded corners,shadows,gradients,transitions or animations,as well as new layouts like multi-columns,flexible box or grid layouts.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingThree">
        <h2 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree">Responsive Design</button>
        </h2>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#myAccordion">
        <div class="card-body">
          Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website,depending on the screen size and orientation of the device being used to view it. ... In responsive design,page elements reshuffle
          as the viewport grows or shrinks.
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>

</html>