如何使用bootstrap 3制作响应式手风琴布局？

Question

如果我想制作这种响应式布局，我如何布置bootstrap网格？

在下面的图片中，小方框就像一个标签，点击它时会显示底部的内容。

当窗口/在较小的屏幕中查看时，它将相应地减少列，但它应保留其功能。

桌面

Desktop http://i61.tinypic.com/9sf255.png

片剂

Desktop http://i57.tinypic.com/v3ooiv.png

移动

Desktop http://i62.tinypic.com/1z738n7.png

引导程序布局

 <div class="row">

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>                
        <div class="clearfix"></div>
      </div>     

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>                
        <div class="clearfix"></div>
      </div>     

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>  

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>
  </div>

  <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#" class="double-line">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>   

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>     

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#" class="double-line">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>  

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>
  </div>

Answer 1

这可以通过Bootstrap中的折叠javascript功能来实现。见http://getbootstrap.com/javascript/#collapse

您可以使用此代码段来完成它。

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  Simple collapsible </button>
 <div id="demo" class="collapse in">...</div>

然后试试这个：

  <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
     <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">Button to toggle open and close</button></div>
   <div id="demo" class="collapse in col-md-12 what-content">...</div>

您需要完成其余的代码，但这应该可以帮助您入门。