如何使基金會應用程序塊流動

我正在使用基金會應用程序在我的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）塊可水平擴張，當它擴展了它是唯一的阻止該行。

我試圖刪除小四（根據我的理解意味着將下一個元素拆分爲4和大小的孩子相應），並切換大小類出我的指令（即使用小3，當4列或小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。

我該如何做到這一點？擴展元素佔用整行，而其他塊保持相同大小並流向下一行？

來源

2016-02-05 DaFoot

查看版本1.2的最新文檔，您應該使用「wrap」類而不是頂層div中的「small-up-4」。這將覆蓋任何不適合當前行的網格塊。

雖然沒有嘗試過。

來源

2016-02-14 16:59:24

如何使基金會應用程序塊流動

回答

相關問題