Css 如何使用引导以特定方式对阵列进行排序

在angular 8项目中，我希望以这种方式订购阵列：

1   4   7   10
2   5   8   11
3   6   9   12

这个列表来自GET call，所以我不知道有多少项，它需要尽可能地响应。 我正在使用Bootstrap4.x，我正试图通过FlexDirection属性实现这一点，但我遗漏了一些东西。

---

有没有一种简单的方法可以做到这一点？

不确定bootstrap的grid/flex实用程序类是否能够单独为您的需求提供完整的解决方案，因为您不可避免地需要以某种方式为容器提供最大高度，以调用正在重复的子元素的正确包装

因此，这里有一个快速的方法来做同样的事情，如果你想，我们可以将其中的一些转换为实用程序类，我想只需要使用一种特殊的方法来压缩容器并调用包装，以获得相同的结果，并使其更像boostrap'ish

.集装箱{ 身高：11雷姆； 显示器：flex； 弯曲方向：立柱； 柔性包装：包装； } .容器>*{ flex:1自动； } .货柜组{ 高度：1公厘； 最大高度：1公厘； 边框：浅灰色1px实心； 填充：1rem； 文本对齐：居中； 保证金：25雷姆； } 1. 2. 3. 4. 5. 6. 7. 8. 9 10 11 12 13

---

对于我来说，最好的解决方案是使用列计数：3，对于响应性，我会根据屏幕大小以一种简单的方式更新列计数

---

对于列计数，我不必指定高度或其他css，只需css 1行。

好的，但响应性如何？借助bootstrap，我的所有专栏都能响应，所以，在这种情况下，有可能有类似col-sm-4 col-md-3的东西吗？您可以使用一些或取决于您使用引导的方式，如果您的构建管道中直接有它们的SCS，您可以将您自己的大小直接添加到它们的变量中，并使用实用程序类生成自定义内容。或者，您也可以随时添加自己的响应能力。相关：