html - 在父 div 下打开 Bootstrap Accordion 内容

Question

我试图打开每个 div 在它们各自的父级 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

只需将可折叠的 div 放入 col-md-4 div

<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>