So stellen Sie das Grid-System im BootStrap-Panel her

Question

Ich habe versucht, ein Grid-System aus 3 Spalten und 3 Zeilen im Bootstrap-Panel zu erstellen. Es ist etwas, das wie folgt aussehen:

Dazu habe ich versucht, meinen Code wie unten:

<div class="container"> 
     <div class="row"> 
      <div class="col-xs-6"> 
       <div class="panel panel-info"> 
       <div class="panel-heading"> 
          <span class="panel-title"> 
           Overview - Inquiry Statistics By Branch 
          </span> 
          <div class="panel-heading-controls"> 
           <div class="panel-heading-icon" style="padding-top:0px;"> 
            <a title="Refresh" class="link"><i id="RefreshBranchProductivity" class="fa fa-refresh"></i></a> 
           </div> 
          </div> 

         </div> 
        <div class="panel-body"> 
        <div class="row"> 
         <div class="col-xs-4"><a href="new.html"><span>0</span><br><span>NEW</span></a></div> 
         <div class="col-xs-4"><a href="assigned.html"><span>4</span><br><span>ASSIGNED</span></div> 
         <div class="col-xs-4"><a href="meeting.html"><span>2</span><br><span>MEETING</span></div> 
        </div> 
        <div class="row"> 
         <div class="col-xs-4"><a href="applied.html"><span>12</span><br><span>APPLIED</span></div> 
         <div class="col-xs-4"><a href="rejected.html"><span>4</span><br><span>REJECTED</span></div> 
         <div class="col-xs-4"><a href="more.html"><span>2</span><br><span>MORE</span></div> 
        </div> 
        <div class="row"> 
         <div class="col-xs-4"><a href="new_assigned.html"><span>0</span><br><span>NEW ASSIGNED</span></div> 
         <div class="col-xs-4"><a href="next_followup.html"><span>0</span><br><span>UPCOMING FOLLOWUP</span></div> 
         <div class="col-xs-4"><a href="today_followup.html"><span>0</span><br><span>TODAY FOLLOWUP</span></div> 
        </div> 
        </div> 
      </div> 
     </div> 

jedoch das Ergebnis nicht grid ist gut, da es nicht Grenze nicht hat und wie im Bild ausgerichtet.

Wie kann ich meinen Strom korrigieren, damit er wie auf dem Bild gut aussieht? Vielen Dank. Diese

Answer 1

ist nur ein Beispiel (im verwendet für bootstrap v3.3.7) jetzt sind sie bootstrap@4.0.0-beta seine nicht vorgesehen panel
lernen bootstrap 4https://getbootstrap.com/

Bootstrap 3, verwandte Karten ersetzen unsere alten Platten, Brunnen und Thumbnails. Ähnliche Funktionen wie diese Komponenten sind als Modifikationsklassen für Karten verfügbar.

https://getbootstrap.com/docs/4.0/components/card/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'> 
 
<div class="container"> 
 
    <div class="row"> 
 
    
 
    
 
    
 
     <div class="col-md-12 col-md-offset-1"> 
 

 
      <div class="panel panel-success panel-table"> 
 
       <div class="panel-heading"> 
 
       <div class="row"> 
 
        <div class="col col-xs-6"> 
 
        <h3 class="panel-title">Panel Heading</h3> 
 
        </div> 
 
        <div class="col col-xs-6 text-right"> 
 
        <i class="fa fa-refresh" aria-hidden="true"></i> 
 
        </div> 
 
       </div> 
 
       </div> 
 
       <div class="panel-body"> 
 
       <table class="table table-striped table-bordered table-list"> 
 
        <thead> 
 
        <tr> 
 
         <th></th> 
 
         <th></th> 
 
         <th></th> 
 
         
 
        </tr> 
 
        <tr> 
 
         <th></th> 
 
         <th></th> 
 
         <th></th> 
 
         
 
        </tr> 
 
        <tr> 
 
         <th></th> 
 
         <th></th> 
 
         <th></th> 
 
         
 
        </tr> 
 
        </thead> 
 
        <tbody> 
 
          <tr> 
 
          
 
         </tbody> 
 
       </table> 
 
      
 
       </div> 
 
       
 
       </div> 
 
       </div> 
 
      </div> 
 

 
</div></div></div>