1

我在 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）渲染的每个块都可以水平扩展，并且当它扩展为该行上的唯一块时。

我尝试删除 small-up-4 （据我了解，这意味着将下一个元素拆分为 4 并相应地调整子项的大小）并在我的指令之外切换大小类（即在 4 列时使用 small-3 或 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。

我怎样才能做到这一点？扩展元素占据一整行，而其他块保持相同大小并流到下一行？

4

1 回答 1

0

查看 1.2 版的最新文档，您应该在顶级 div 中使用“wrap”类而不是“small-up-4”。这将包装任何不再适合当前行的网格块。

虽然没试过。

于 2016-02-14T16:59:24.010 回答