Загрузочная сетка пустое место

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 - живой пример проблемы.

Заранее благодарен! Nick van der Meij

Answer 1

После того, как я боролся с ним еще несколько часов, я наконец понял это. Это не самый удобный для процессора способ, но вот он:

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