ブートストラップテーブルのレイアウト

Question

ブートストラップ3で以下に示す設定を実現しようとしていますが、特に応答性を保つために、それを行う方法を見つけることができません。私はパネルやテーブルなどを見ていましたが、実際にはこれまでにはうまくいかなかった傾向があります。

Answer 1

私は最後にそれを考え出しました。パネル内の行をちょっとぶち壊してみました。

<div class="panel-group" id="accordion" role="tablist"> 

    <div class="panel panel-default container-fluid"> 
     <div class="row panel-heading "> 
      <div class="col-sm-1 pull-left"></div> 
      <div class="col-sm-4 col-xs-12">Asset ID</div> 
      <div class="col-sm-2 col-xs-12">Status</div> 
      <div class="col-sm-2 col-xs-12">Asset Nodes</div> 
      <div class="col-sm-3 col-xs-12">Manage</div> 
     </div> 
    </div> 

    <div class="panel panel-default container-fluid"> 
     <div class="panel-heading row" role="tab" id="headingOne"> 
      <div class="col-xs-1"> 
       <div data-toggle="collapse" class="handpointer glyphicon glyphicon-chevron-right"></div> 

      </div> 
      <div class="col-sm-4 col-xs-12"> 
       <a href="#">xxx</a> 
      </div> 
      <div class="col-sm-2 col-xs-12">Normal</div> 
      <div class="col-sm-2 col-xs-12">?</div> 
      <div class="col-sm-3 col-xs-12"><a class="btn btn-xs btn-default" href="#" role="button">button</a></div> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       dsfsdfd 
      </div> 
     </div> 
    </div> 

</div> 

http://www.bootply.com/NLxmcWu4SJ