语义用户界面：使用“双行”类交错网格列行？答案

【问题标题】：semantic-ui: interleaving grid column rows using 'doubling row' class?语义用户界面：使用“双行”类交错网格列行？
【发布时间】：2015-03-25 04:26:23
【问题描述】：

我有一个包含两列的 ui 网格 - 左边有偶数项，右边有奇数项。当窗口宽度减小时，两列合二为一，这是正确的。但是，右列现在位于左列下方，这意味着所有偶数项都显示在奇数项之上。

使用双行类以响应方式交错行项目的正确方法是什么？

这是一个证明我的观点的小提琴：https://jsfiddle.net/mikestaub/dhsytqqv/

我怎样才能让订单变成：

c1-item1
c2-item1
c1-item2
c2-item2

我可以想出一些在 javascript 中实现这一点的方法，但它们看起来都很老套。在语义用户界面中是否有适当的方法来处理这个问题？我在文档中找不到任何有用的东西。

这是我想要的非语义用户界面示例：http://jsfiddle.net/wa2YQ/

【问题讨论】：

您可以将c1-item1 & c2-item1 放在一行中，而将其他放在另一行中。类似this
谢谢@anpsmn，你是对的。我修改了我的答案以解释 ng-repeat。

标签： javascript html css semantic-ui

【解决方案1】：

我忘了提到我将它与 angular 和 ng-repeat 一起使用。这是我发现最适合我的解决方案。万一其他人将来遇到这种情况：

<div class='ui grid'>
  <div class='doubling two column row' ng-repeat='item in items' ng-if='$even'>
    <div class='column'>
      {{ item.num }}
    </div>
    <div class='column'>
      {{ items[$index+1].num }}
    </div>
  </div>
</div>

【讨论】：