Bootstrap 4崩溃

时间:2018-04-19 02:26:38

标签: html bootstrap-4

任何人都可以帮助我让折叠式手风琴工作......不能使它工作,代码对我来说有一定道理并且它等于这个https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example

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

android {
compileSdkVersion 27
defaultConfig {
    applicationId "com.paultoillion.myapplication"
    minSdkVersion 19
    targetSdkVersion 27
    versionCode 1
    versionName "1.0"
    testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
    release {
        minifyEnabled false
        proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
}
}
dependencies {
 implementation fileTree(dir: 'libs', include: ['*.jar'])
 implementation 'com.android.support:appcompat-v7:27.1.1'
 implementation 'com.android.support.constraint:constraint-layout:1.1.0'
 testImplementation 'junit:junit:4.12'
 androidTestImplementation 'com.android.support.test:runner:1.0.1'
 androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
 implementation 'net.bican:jwordpress:0.7.0'
}

CSS:

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>

1 个答案:

答案 0 :(得分:-1)

没关系第一次编码错误...... Jquery不是第一次......