親ブーツの下にブートストラップアコーディオンの内容を表示

Question

divをそれぞれの親の下に開こうとしていますが、codeは最初の画像の下にそれぞれdivを開きます。私はpositionが間違っていると感じていますか？

.collapse { 
    position: relative; 
    bottom: 0; 
} 

<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> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
<section class=""> 
    <div class="container"> 
    <div class="row"> 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
     <div class="col-md-4 clickable"> 
      <img src="https://placeimg.com/640/480/arch" class="img-responsive"> 
     </div> 
     </a> 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSecond" aria-expanded="true" aria-controls="collapseSecond"> 
     <div class="col-md-4 clickable"> 
      <img src="https://placeimg.com/640/480/nature" class="img-responsive"> 
     </div> 
     </a> 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThird" aria-expanded="true" aria-controls="collapseThird"> 
     <div class="col-md-4 clickable"> 
      <img src="https://placeimg.com/640/480/tech" alt="" class="img-responsive"> 
     </div> 
     </a> 
     <div class="col-md-4"> 
     <img src="" class="img-responsive"> 
     </div> 
     <div class="col-md-4"> 
     <img src="" alt="" class="img-responsive"> 
     </div> 
     <div class="col-md-4"> 
     <img src="" alt="" class="img-responsive"> 
     </div> 
    </div> 
    </div> 
    <div class="container"> 
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="row"> 
     <div class="container"> 
      <div class="col-sm-2"> 
      <img src="https://placeimg.com/20/20/any/sepia" alt=""> 
      </div> 
      <div class="col-sm-2"> 
      <img src="https://placeimg.com/20/20/any" alt=""> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div id="collapseSecond" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSecond"> 
    <div class="row"> 
     <div class="container"> 
     <div class="col-sm-2"> 
      <img src="https://placeimg.com/20/20/nature/sepia" alt=""> 
     </div> 
     <div class="col-sm-2"> 
      <img src="https://placeimg.com/20/20/animals/grayscale" alt=""> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div id="collapseThird" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThird"> 
    <div class="row"> 
     <div class="container"> 
     <div class="col-sm-2"> 
      <img src="https://placeimg.com/20/20/any/sepia" alt=""> 
     </div> 
     <div class="col-sm-2"> 
      <img src="https://placeimg.com/20/20/any" alt=""> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

Answer 1

ちょうどグレートこれは正常に動作しますcol-md-4divの

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<section class=""> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
     <div class="col-md-4 clickable"> 
 
      <img src="https://placeimg.com/640/480/arch" class="img-responsive"> 
 
     </div> 
 
     </a> 
 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSecond" aria-expanded="true" aria-controls="collapseSecond"> 
 
     <div class="col-md-4 clickable"> 
 
      <img src="https://placeimg.com/640/480/nature" class="img-responsive"> 
 
     </div> 
 
     </a> 
 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThird" aria-expanded="true" aria-controls="collapseThird"> 
 
     <div class="col-md-4 clickable"> 
 
      <img src="https://placeimg.com/640/480/tech" alt="" class="img-responsive"> 
 
     </div> 
 
     </a> 
 
     <div class="col-md-4"> 
 
     <img src="" class="img-responsive"> 
 
     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
 
      <div class="row"> 
 
      <div class="container"> 
 
       <div class="col-sm-2"> 
 
       <img src="https://placeimg.com/20/20/any/sepia" alt=""> 
 
       </div> 
 
       <div class="col-sm-2"> 
 
       <img src="https://placeimg.com/20/20/any" alt=""> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <img src="" alt="" class="img-responsive"> 
 
     <div id="collapseSecond" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSecond"> 
 
      <div class="row"> 
 
      <div class="container"> 
 
       <div class="col-sm-2"> 
 
       <img src="https://placeimg.com/20/20/nature/sepia" alt=""> 
 
       </div> 
 
       <div class="col-sm-2"> 
 
       <img src="https://placeimg.com/20/20/animals/grayscale" alt=""> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <img src="" alt="" class="img-responsive"> 
 
     <div id="collapseThird" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThird"> 
 
      <div class="row"> 
 
      <div class="container"> 
 
       <div class="col-sm-2"> 
 
       <img src="https://placeimg.com/20/20/any/sepia" alt=""> 
 
       </div> 
 
       <div class="col-sm-2"> 
 
       <img src="https://placeimg.com/20/20/any" alt=""> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container"> 
 

 
    </div> 
 

 

 
</section>