Twitter bootstrap 引导面板未正确显示

我正在动态生成一些面板。我的计划是在一行中渲染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>

小组1
小组2
小组3
小组4
小组5
小组6

但是，第一行的面板渲染正确，但第二行的面板分解，如图所示

我的实际代码如下所示：

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>';
}

if（$query->num\u rows（）>0）{
foreach（$query->result\u array（）作为$row）{
$HTML.=''；
$HTML.=''；
$HTML.=''.$row['pr_student_name'].'；
$HTML.=''；
$HTML.=''；
$HTML.=''；
$HTML.=''；
$HTML.=$row['pr_placed_org']；
$HTML.=''；
$HTML.=''；
$HTML.=''；
}
}否则{
$HTML.='--未找到任何数据--'；
}

---

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

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

<div class="row">

---

。试试看..

您缺少

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

小组1
小组2
小组3
小组4
小组5
小组6

始终将列（.col）包装在

引导中的
行
类中

希望这会对你有所帮助。
你建议的价值是什么？没有运气。还是一样：（@gomeshmunda，每个
..
应该只包含4个项目。接下来的4个项目将包含一个新的
..
等等。这是你尝试过的吗？