Bootstrap面板显示不正确

Question

我正在动态生成一些面板。我的计划是连续渲染4个面板，如：

<div class="col-md-12">
  <div class="col-md-3">Panel 1</div>
  <div class="col-md-3">Panel 2</div>
  <div class="col-md-3">Panel 3</div>
  <div class="col-md-3">Panel 4</div>
  <div class="col-md-3">Panel 5</div>
  <div class="col-md-3">Panel 6</div>
</div>

但是，面板在第一行正确呈现，但在第二行呈现分解，如图所示

我的实际代码如下：

if ($query->num_rows() > 0) {
    foreach ($query->result_array() as $row) {
        $HTML.='<div class="col-md-3">';
            $HTML.='<div class="panel panel-default">';
                $HTML.='<div class="panel-heading">'.$row['pr_student_name'].'</div>';
                $HTML.='<div class="panel-body">';
                    $HTML.='<img src="'.site_url().'assets/admin/uploads/placement_img/'.$row['pr_student_photo'].'" alt="'.$row['pr_student_name'].'" alt="'.$row['pr_student_name'].'" class="img-responsive ops_img" width="80" height="80"/>';
                $HTML.='</div>';
                $HTML.='<div class="panel-footer">';
                    $HTML.=$row['pr_placed_org'];
                $HTML.='</div>';
            $HTML.='</div>';
        $HTML.='</div>';
    }
}else{
    $HTML.='<span style="color:red;">--No Data Found--</span>';
}

请告知我的代码有什么问题。我正在使用Bootstrap v3.3.4。感谢。

Answer 1

您缺少UITableViewContoller课程

.row

始终在<div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-3">Panel 1</div> <div class="col-md-3">Panel 2</div> <div class="col-md-3">Panel 3</div> <div class="col-md-3">Panel 4</div> </div> <div class="row"> <div class="col-md-3">Panel 5</div> <div class="col-md-3">Panel 6</div> </div> </div> </div> </div> 中的.row类中包装列（.col）。

希望这会对你有所帮助。

Answer 2

我认为您应该将您的父容器从col-md-12更改为

<div class="row">

。试试吧..