html - Bootstrap 网格空白空间

Question

在为我的网站制作首页时，我偶然发现了一个烦人的 css 问题。看下图:

如图所示，我想列出我的元素而没有空格。然而，到目前为止我的尝试没有成功......

这是我的代码:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-9">
            <div class="row">
                <!-- gets repeated for all items in array -->
                <div class="col-md-6 col-xs-12" ng-repeat="flong in flongs">
                    <a href="/flong/id">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <img class="img-responsive center-block" src="http://placehold.it/350x175">
                                <p class="text-center"><b>Titel</b></p>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- end loop -->
            </div>
        </div>
        <div class="col-xs-12 col-md-3">
            <div>
                <!-- gets repeated for all items in array -->
                <div class="row" ng-repeat="flong in flongs | limitTo: 5">
                    <div class="col-xs-12">
                        <a href="/flong/id">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <img class="img-responsive center-block" src="http://placehold.it/350x175">
                                    <p class="text-center"><b>Titel</b></p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- end loop -->
            </div>
        </div>
    </div>
</div>

有人知道如何解决这个问题吗？弄乱了 4 个多小时后，我已经厌倦了这个狗屎；P

关于 8Flongs是问题的一个活生生的例子。

提前致谢! 尼克·范德梅杰

Answer 1

经过几个小时的努力，我终于弄明白了。这不是对 CPU 最友好的方式，但它是:

<div ng-hide="isLoading()">
            <div class="col-md-6">
                <div ng-repeat="flong in flongs">

                    <a href="/flong/{{flong.id}}" class="no-text-decorations" target="_blank" ng-show="$even" ng-mouseover="flong.showBody = true" ng-mouseout="flong.showBody = false">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <img class="img-responsive center-block" src="http://placehold.it/350x175">
                                <p class="text-center"><b>title</b></p>
                                <p class="text-center" style="color:white;" ng-show="flong.showBody">body</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-6">
                <div ng-repeat="flong in flongs">

                    <a href="/flong/{{flong.id}}" class="no-text-decorations" target="_blank" ng-show="$odd" ng-mouseover="flong.showBody = true" ng-mouseout="flong.showBody = false">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <img class="img-responsive center-block" src="http://placehold.it/350x175">
                                <p class="text-center"><b>title</b></p>
                                <p class="text-center" style="color:white;" ng-show="flong.showBody">body test</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

无论如何，感谢所有的帮助!