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）现在它们与bootstrap@4.0.0-beta未提供panel相关了解bootstrap 4 https://getbootstrap.com/

Bootstrap 3，卡片取代我们的旧面板，水井和缩略图。这些组件的类似功能可用作卡的修饰符类。

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>

如何在BootStrap面板中制作网格系统

1 个答案: