引导网格空白

Question

While making a frontpage for my website, I stumbled across an annoying css problem. Look at the picture below:

Like shown in the picture, I want to list my items without the empty space. However, my attempts so far are unsuccessfull...

Here is my code:

<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>

anyone any idea how to fix this? After messing with it for over 4 hours, I'm pretty tired with this shit ;P

On 8Flongs is an live example of the problem.

Thanks in advance! Nick van der Meij

Answer 1

After struggling with it for a few more hours i finally figured it out. Its not the most CPU friendly way, but here it is:

<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>

Anyway, thanks for all the help!

Answer 2

I might be too late to solve the problem for BattleOn but I would suggest using salvattore library. It creates a pinterest like structure with fluid elements.

Site's here - http://salvattore.com/