使用Angularjs将动态行添加到Bootstrap Gridlayout

Question

今天我面临一个新问题。我的资源有一些格式（json）的项目，我将在Bootstrap Gridlayout中显示数据。

       <div class="row">
            <div class="Box">
                <div ng-repeat="sub in subscribed | filter:searchFilter" class="col-sm-6 col-md-4">
                            <h6 class="text-muted">{{ sub.genre }} / {{ sub.seasons }} Season(s)</h6>
                            <p></p>
                            <p><a href="#sub/{{ sub.id }}" class="btn btn-primary" role="button">More...</a>           </p>
                        </div>
                    </div>
                </div>
          </div>
     </div>

当我在内容框中添加3个以上的项目（宽度：800px，高度：600px）时，bootstrap会覆盖以前的项目。 如何使用AngularJs添加新行或者是否有一些Bootstrap技巧？

修改

以下是代码段：http://jsfiddle.net/LaPpd/ 我总是从一行得到叠加。

修改2

对不起伙计们，我有一个绝对位置的div。