Question

在为我的网站制作首页时，我偶然发现了一个恼人的CSS问题。请看下面的图片：

enter image description here

如图所示，我想列出没有空白空间的物品。但是，到目前为止我的尝试都没有成功......

这是我的代码：

<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

On 8Flongs是问题的实例。

提前致谢！ Nick van der Meij

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>

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

Answer 2

我可能来不及为BattleOn解决问题，但我建议使用salvattore库。它创造了一个类似于流体元素的类似结构。

网站在这里 - http://salvattore.com/

Bootstrap网格空白空间

2 个答案: