2016-06-11 12 views
-1

Ich versuche, das unten abgebildete Setup mit Bootstrap 3 zu erreichen, aber ich kann nicht ganz einen Weg finden, es zu tun, besonders um es reaktionsfähig zu halten. Ich habe mir Platten und Tische angeschaut, aber dann tendiere ich dazu, bis jetzt noch nicht wirklich toll geklappt zu haben.Bootstrap-Tabellenlayout

enter image description here

+1

Sie Klasse hinzufügen ** Tisch-responsive **? – XZKS

+3

Haben Sie etwas versucht? Zeigen Sie Ihr HTML/CSS. – makshh

Antwort

0

ich es dachte, am Ende heraus. Ich habe nur ein bisschen herumgespielt mit Reihen in den Platten.

<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