ブートストラップパネルでグリッドシステムを作る方法

Question

ブートストラップパネルの内側に3列3列のグリッドシステムを作ろうとしました。それは次のようになり何かである：、私のような以下の私のコードを試してみました

です：それは国境を持っていないよう

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

をしかし、結果はよくグリッドではなく、写真のように整列させる。

写真のように見た目を良くするにはどうすればよいですか？ありがとう。

Answer 1

これは一例（bootstrap v3.3.7に使用IM）である は今、彼らは関連しているbootstrap@4.0.0-betaその
panelは、ブートストラップ3は、カードは私たちの古いパネル、井戸、およびサムネイルを交換https://getbootstrap.com/

bootstrap 4を学ぶ提供しません。これらのコンポーネントと同様の機能をカードの修飾子クラスとして利用できます。

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>