-1
Я пытаюсь открыть каждый div
под их родителями div
, но мой code открывает каждый div
под первым изображением, где никто не может видеть. Я чувствую, что использую position
неправильно?Открытия контент Bootstrap аккордеон под родительский DIV
.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>
Great это работает отлично. просто проблема заключается в том, что когда на мобильных устройствах он показывает путь ниже, как указано в html, тогда как я хочу показать ниже его div или что-то подобное. – Nofel
Я забыл упомянуть в своем вопросе, у меня есть сворачивающийся div 'col-md-12', но когда он подпадает под' col-md-4', он ограничивается столбцом collapseable to 4. – Nofel