我正在使用Laravel框架和Bootstrap开发网站，需要实现可折叠组件的响应式布局！我需要一些帮助 :)
大屏幕尺寸：
点击第一张图片：
点击第二张图片：
小屏幕尺寸：
点击第一张图片：
点击第二张图片：
目前我在处理大屏幕尺寸时遇到了问题：
代码：bootply
<section class="container full-width">
<div class="row" id="accordion">
<div class="col-lg-4 col-xs-12 no-padding">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive"/>
</a>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="col-lg-4 col-xs-12 no-padding">
...
</div>
<div class="col-lg-4 col-xs-12 no-padding cyan">
...
</div>
<div class="col-lg-4 col-xs-12 no-padding">
...
</div>
</div>
</div>
<div class="col-lg-4 col-xs-12 no-padding">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive"/>
</a>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="col-lg-4 col-xs-12 no-padding">
...
</div>
<div class="col-lg-4 col-xs-12 no-padding cyan">
...
</div>
<div class="col-lg-4 col-xs-12 no-padding">
...
</div>
</div>
</div>
<div class="col-lg-4 col-xs-12 no-padding">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<img src="http://static.tumblr.com/fjmz0wv/axlmf39xl/tumblr_m6o0emjayw1ru64rao1_1280.jpg" alt="" class="img-responsive"/>
</a>
<div id="collapseThree" class="panel-collapse collapse">
<div class="col-lg-4 col-xs-12 no-padding">
...
</div>
<div class="col-lg-4 col-xs-12 no-padding cyan">
...
</div>
<div class="col-lg-4 col-xs-12 no-padding">
...
</div>
</div>
</div>
</div>
</section>
好的！我该如何拉伸可折叠组件？当我点击其他组件时，Bootstrap折叠组件是如何关闭其他组件的？
希望我已经能够解释清楚我的问题了 :)
感谢您的关注！
编辑：
已解决：
bootply
这个布局是针对 foreach 的（每行 3 个项目）
<section class="container-fluid no-padding">
<div class="row no-padding">
<div id="accordion-lg">
<div class="hidden-xs panel">
@foreach (array_chunk($collection, 3) as $row)
@foreach ($row as $item)
<a class="col-lg-4 no-padding" data-toggle="collapse" href="{{ '#collapse-lg'.$item->id }}" data-parent="#accordion-lg">
Collapse Toogle
</a>
@endforeach
@foreach ($row as $item)
<div id="{{ 'collapse-lg'.$item->id }}" class="collapse">
Collapse
</div>
@endforeach
@endforeach
</div>
</div>
<div id="accordion-xs">
<div class="hidden-lg panel">
@foreach ($category->trips as $item)
<a class="col-xs-12 no-padding" data-toggle="collapse" href="{{ '#collapse-xs'.$item->id }}" data-parent="#accordion-xs">
Collapse Toogle
</a>
<div id="{{ 'collapse-xs'.$item->id }}" class="collapse">
Collapse
</div>
@endforeach
</div>
</div>
</div>
</section>
感谢帮助解决这个问题！
