jquery - 使用 Foundation Framework 为 json 输出设置行/列/类的样式

Question

这里完全是新手...所以请耐心等待。

我的 json 文件和输出已经正常工作，现在我需要一些帮助来使用 Foundation Framework 按照我想要的方式设计它。

假设我的 json 文件是这样的:

{"quotes":[
    {
    "department": "Design",
    "feedback": "Blah Blah Blah",
    "process": "Yes",
    "culture": "No"
    },
    {
    "department": "HR",
    "feedback": "Blah Blah Blah",
    "process": "Yes",
    "culture": "Yes"
    }
]}

我可以将每个引用显示为段落或列表项，但我真的希望每个引用出现在单独的面板上( http://foundation.zurb.com/docs/components/panels.html ) - 所以每个引用都类似于:

<div class="panel">
    <h2>Design</h2>
    <p>Blah Blah Blah</p>
    <p>Yes</p>
    <p>No</p>
</div>

我一生都无法弄清楚的是，如果我有 200 个引号，我如何将面板设置为在“大”屏幕上跨越 3 或 4 列到一行，以及 1 到一个排在“小”上？例如

<div class="row>
    <div class="small-12 large-4 columns">
        <div class="panel>
        *Quote 1*
        </div>
    </div>
    <div class="small-12 large-4 columns">
        <div class="panel>
        *Quote 2*
        </div>
    </div>
    <div class="small-12 large-4 columns">
        <div class="panel>
        *Quote 3*
        </div>
    </div>
</div>
<div class="row>
    <div class="small-12 large-4 columns">
        <div class="panel>
        *Quote 4* yada yada

我可以很容易地在一列中创建多个面板，但不知道如何让它们运行，然后在一行中的总列数达到 12 时生成一个新的行 div。

任何帮助将不胜感激...谢谢!

Answer 1

最简单的方法是不创建新的 row div 并将所有面板放在一个 row 中。每当列数超过 12 时，它们将自动换行，并且您不必动态创建新的行 div。

这可能有点“肮脏”，但根据我的经验，有时你必须稍微改变框架的规则，而不是仅仅为了遵守工具的规则而将你的网站弯曲成各种形状。应该可以帮助你。

参见:jsbin