使用 Handlebars 迭代数组时保持响应式 Flex 属性-PHP中文网问答

我有以下代码（使用 Handlebars，JSFiddle 中的工作代码）：

<div class="cards-container">
    {{#each this.cards}}
    <div
      class="card-container container-col-inner col-12 col-md-6 col-lg-3"
    >
      <div class="image-card">
        <div class="image-content">
          <p class="title">{{title}}</p>
        </div>
      </div>
    </div>
    {{/each}}
  </div>

{
  "3columnLayout": false,
  "cards": [
    {
      "title": "Card 1"
    },
    {
      "title": "Card 2"
    },
    {
      "title": "Card 3"
    }
  ]
}

基本上，它会遍历卡片数组并为每个项目创建一个card-container div。然后使用 bootstrap 为每个 div 分配一个 CSS 类，例如 col-md-6，以便：

移动设备：项目显示在单列中
平板电脑：项目显示在 2 列中
桌面：项目显示在 3 列中

这一切都按预期工作，并在视觉上给出了所需的 UI（无论卡片数量如何）：下面的示例：

但是，如 JSON 中所示，我需要一个位于单个卡级别之外的属性，以确定桌面是否应从 4 列布局中断为 3 列布局。

我不想为卡片数组中的每张卡片重复此属性，因此重组了我的代码，如我的代码片段所示（使用 Handlebars）：https://jsfiddle.net/stcfa5wh/20/

但是，这现在意味着虽然我可以访问 3columnLayout 值：HTML 会转储到页面上，并且我不能再以我的方式使用 col以前做过。

例如，在平板电脑上，我可以将每个image-card 设置为 50% 的宽度，但它忽略了行的需要。

任何人都可以建议一种既保留 HTML 结构又能够实现顶级属性（例如 3columnLayout）的方法吗？