Question

我正在html页面中使用Foundation-Apps，我希望以四行为单位显示一系列块（未知数）。

我已经管理了很多：

<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）可以水平扩展，当它扩展时它是该行上唯一的块。

我尝试删除小up-4（据我所知，这意味着将下一个元素拆分为4并相应地调整子项）并在我的指令中切换大小类（即当4列或小时使用小-3） -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版的最新文档，您应该在顶级div中使用“wrap”类而不是“small-up-4”。这将包装任何不适合当前行的网格块。

虽然没试过。

如何使用Foundation-apps制作块流

1 个答案: