Как заставить блоки течь с помощью Foundation-приложений

Question

Я использую Foundation-Apps на html-странице, где хочу отобразить ряд блоков (неизвестное число) в строках по четыре.

Вот так много мне удалось:

<div class="grid-block small-up-4">
  <div ng-repeat="thing in vm.collection"  class="grid-content">
      <myDirective thing="thing" expanded="false"/>
  </div>
</div>

Теперь проблема в том, что мне нужно, чтобы каждый из блоков, представленных (myDirective), можно было развернуть по горизонтали, а когда он расширяется, чтобы он был единственным блоком в этой строке.

Я попытался удалить small-up-4 (который, как я понимаю, означает разделить следующий элемент на 4 и потомков размера соответственно) и переключить классы размеров в моей директиве (т.е. использовать small-3, когда 4 столбца, или small-12, когда развернут и должен занимать полный ряд), но мне кажется, что я могу получить только один блок в строке или 4 блока, и их внутренний размер изменяется, когда я устанавливаю второй контент видимым.

myDirective выводит что-то вроде этого:

<div class-"grid-block">
  <div class="card" class="{{vm.expanded?'small-3':'small-12'}}">
  ....
  </div>
  <div ng-if="vm.expanded" class="card small-9">
    ....
  </div>
</div>

Бит vm.expanded работает нормально как в директивах, так и в добавлении / удалении классов. Это основа, а не Angular.

Как мне этого добиться? Расширяющийся элемент занимает целую строку, в то время как другие блоки остаются того же размера и переходят к следующей строке?

Answer 1

Глядя на самую последнюю документацию для версии 1.2, вы должны использовать класс "wrap" вместо "small-up-4" в div верхнего уровня. Это обернет любой блок сетки, который больше не помещается в текущую строку.

Хотя не пробовал.