Bootstrap 4 崩溃

Question

任何人都可以在这里帮助我使折叠手风琴工作...无法使其工作，代码对我来说有些意义，它等于这个https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example。

我有一个数据父级，它是 ID="companies" 的 .card 本身，每个折叠都针对此，每个按钮都针对其各自的可折叠内容 它适用于 freecodecamp 项目。我已经制作了一些网页，但手风琴对我不起作用，而不是用锤子打人。我认为最好问问社区

https://codepen.io/adrianwix/pen/rvNgxy?editors=1010

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <h1 class="text-center mt-4">Elon Musk</h1>
      <p class="text-center">A Quest for saving human race</p>
    </div>    
  </div>
  <div class="row">
    <div class="col-md-12">
      <h2>Who is he? Well...</h2>
      <blockquote>"If some of the things that Musk says and does sound absurd, that’s because on one level they very much are. On this occasion, for example, Musk’s assistant had just handed him some cookies-and-cream ice cream with sprinkles on top, and he then talked earnestly about <strong>saving humanity</strong>  while a blotch of the dessert hung from his lower lip."</blockquote>
      <p>Elon Reeve Musk (born June 28, 1971) is a South African-born American entrepreneur and businessman who founded X.com in 1999 (which later became PayPal), SpaceX in 2002 and Tesla Motors in 2003. Musk became a multimillionaire in his late 20s when he sold his start-up company, Zip2, to a division of Compaq Computers. </p>
    </div>
  </div> <!--ROW END-->
  <div class="row-">
    <div class="col">
      <h2>Musk's Companies</h2>
      <p>He is not only the owner of many companies, but all of them are focus on making human race evolve</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div> <!--ROW END-->
  <div class="row">
    <div class="col">
      <div id="companies" class="card">
        <div class="card-header">
          <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
              <button class="btn btn-link" 
                      data-toggle="collapse" 
                      data-target=".spacex" 
                      aria-expanded="true" 
                      aria-controls="SpaceX">
                SpaceX
              </button>
            </li>
            <li class="nav-item">
              <button class="btn btn-link collapsed" 
                      data-toggle="collapse" 
                      data-target=".tesla" 
                      aria-expanded="true" 
                      aria-controls="Tesla">
                Tesla
              </button>
            </li>
            <li class="nav-item">
              <button class="btn btn-link collapsed" 
                      data-toggle="collapse" 
                      data-target=".solar" 
                      aria-expanded="true" 
                      aria-controls="Solar City">
                Solar City
              </button>
            </li>
          </ul>
        </div> <!--CARD-HEADER END-->

        <div class="card-body collapse show p-1 spacex" 
             id="spacex"
             data-parent="#companies">
          <img class="card-img img-fluid"
             src="https://icdn6.digitaltrends.com/image/digitaltrends_es/1-52-1500x1000.jpg" 
             alt="SpaceX last and best rocket in the world. Falcon Heavy">
          <div class="box">
            <h3 class="card-title">SpaceX</h3>
            <p class="card-text">A company with one single red star in front of them, colonizing Mars.</p>
    <a href="http://www.spacex.com/" class="card-link">SpaceX website</a>
          </div>
        </div> <!--CARD BODY END-->

        <div class="card-body collapse p-1 tesla" 
             id="tesla" 
             data-parent="#companies">
          <img class="card-img img-fluid" 
 src="https://www.tesla.com/sites/default/files/images/software_update.jpg" 
               alt="Tesla model 3 car">
          <div class="box">
            <h3 class="card-title">Tesla</h3>
            <p class="card-text">Detroid best enemy. Chose to produce electric cards when everyone believe it was impossible.</p>
            <a href="https://www.tesla.com/?redirect=no" class="card-link">Tesla website</a>
          </div>
        </div> <!--CARD BODY END-->

        <div class="card-body collapse p-1 solar"
             id="solar"
             data-parent="#companies">
          <img class="card-img img-fluid" 
               src="https://www.tesla.com/sites/default/files/images/software_update.jpg" 
               alt="Tesla model 3 car">
          <div class="box">
            <h3 class="card-title">Solar City</h3>
            <p class="card-text">Exploring new way to use renovable energy in order to protect the earth.</p>
            <a href="https://www.tesla.com/solarpanels" class="card-link">Tesla website</a>
          </div>
        </div> <!--CARD BODY END-->

      </div> <!--CARD END-->
    </div>
  </div>
</div>

CSS：

*
  font-family: Montserrat
#companies  
  .card-body
    position: relative
    .box
      position: absolute
      top: 20%
      left: 5%
      width: 40%
      color: white
      background: black
      padding: 1rem
      border-radius: 10px

Answer 1

没关系第一次 codepen 错误... Jquery 不是第一个...