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

Question

如果我想制作这种响应式布局,如何布局引导网格？

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

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

桌面

桌面http://i61.tinypic.com/9sf255.png

片

桌面http://i57.tinypic.com/v3ooiv.png

移动

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

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