使用不同的响应布局创建具有任意列计数的网格

Question

我有一个我正在与Foundation建立的Rails应用程序。我无法弄清楚如何在每行显示任意数量的列并在小/中/大布局中保持响应。

例如，假设我的模型Department有很多Employees。我正在尝试构建部门页面并显示部门中的员工列表。一个部门可能有10名员工。另一个可能有6.它是任意的。

我想在large中有4列，medium中有2列，small中有1列。 （见下面的线框）。但是，列需要包含在div.row中。此要求意味着我有以下两种情况之一：

• 案例＃1 （jsfiddle）我每行有2个元素，而large布局只获得2个元素，因为它被.row清除
• 案例＃2 （jsfiddle）我每行有4个元素，并且在2列medium布局中，列不能正确清除，因为有4个连续。

这似乎应该是一个非常标准的情况，但我似乎无法弄明白。我该怎么做呢？基金会是错误的工具吗？

Answer 1

媒体查询和CSS可能会起到作用：

// medium 
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  .row > div:nth-child(2) {clear: left;}
}

每行4个元素

http://quirksmode.org/css/selectors/nthchild.html http://foundation.zurb.com/docs/media-queries.html