Bootstrap-消除行中列之间的间隙

Question

我有一个页面正在动态地将列从数据库结果添加到行中。

有一个父行包装器，并且该行中有多列。我希望它们占据父级的整个宽度并相应对齐，但是随着某些部分的高度增加，似乎会出现间隙。

如何将这些面板装配在一起而不被压下？

提琴：http://jsfiddle.net/o483edpt/

以下是此部分的代码段：

<div class="col-md-9">
        <div class="col-md-12">
            <div class="row">
                <!-- Section -->
                <div class="col-md-6" *ngFor="let s of profileData.sections.section">
                    <div class="hpanel hblue">
                        <div class="panel-heading hbuilt">
                            <i class="{{ s.Icon }} padRight"></i>{{ s.SectionName }}
                            <a href="#">
                                <i class="fa fa-external-link pull-right"></i>
                            </a>
                        </div>
                        <div class="panel-body">
                            <table class="table table-condensed table-striped" *ngIf="s.fields">
                                <tbody>
                                    <tr *ngFor="let f of s.fields.field">
                                        <td>{{ f.FieldTitle }}</td>
                                        <td>{{ f.Value }}</td>
                                    </tr>
                                </tbody>
                            </table>
                            <div *ngIf="!s.fields">
                                <div class="alert alert-danger">
                                    No Data Available
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Section -->
            </div>
        </div>
    </div>