Html 引导网格空空间

在为我的网站制作frontpage时，我偶然发现了一个恼人的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

这是一个活生生的例子

提前谢谢！

---

尼克·范德梅伊（Nick van der Meij）

在与它斗争了几个小时后，我终于找到了答案。这不是对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>

---

无论如何，谢谢你的帮助

我可能太晚了，无法解决BattleOn的问题，但我建议使用salvattore库。它创建了一个带有流体元素的针状结构

---

站点在这里-

我见过这样的问题，html中的空白字符（可能是换行符）会使引导网格系统出错。你可以试着缩小你的html，看看这是否改变了什么。空格上方的框大小不一样。您可以包含指向页面源代码或完整html源代码的链接吗？另外，我认为您正在使用AngularJS渲染页面？可能应该将其添加到您的标签列表中。8flongs.com。你可以看到一个活生生的例子你想把蓝色的放在左边吗？但它放在了正确的位置@Battoni希望它在元素之间没有“空白”。因此，无论它有多长，文章之间的间隔都是相同的。它们不必在水平方向上是正确的，只是verticalI最终解决了这个问题，我制作了一个指令，将原始数组拆分为4个较小的数组，然后使用这些数组生成我想要的；）作品完美无瑕