如何使用引导程序以特定方式订购阵列答案

【问题标题】：How to order an array in a specific way with bootstrap如何使用引导程序以特定方式订购阵列
【发布时间】：2020-05-02 12:11:37
【问题描述】：

在我的 Angular 8 项目中，我想以这种方式订购一个数组：

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

这个列表来自 GET 调用，所以我不知道有多少项目，它需要尽可能地响应。我正在使用 Bootstrap 4.x，我正在尝试使用 flex-direction 属性来实现这一点，但我错过了一些东西。有没有简单的方法可以做到这一点？

【问题讨论】：

相关：stackoverflow.com/q/58598575/8620333

标签： css bootstrap-4

【解决方案1】：

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

所以这里有一个快速的方法来做同样的事情，如果你愿意，我们可以将其中一些转换为实用程序类，我想只是采用一种特别的方式来压缩容器并调用包装以获得相同的结果并让它成为更多的boostrap'ish...

.container {
  height: 11rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.container>* {
  flex: 1 1 auto;
}

.container div {
  height: 1rem;
  max-height: 1rem;
  border: lightgray 1px solid;
  padding: 1rem;
  text-align: center;
  margin: .25rem;
}

<div class="container">
  <!-- These would be the divs you repeat with your xhr -->
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
</div>

【讨论】：

好的，但是响应能力呢？使用引导程序，我的所有列都有响应，所以在这种情况下是否有可能有类似 col-sm-4 col-md-3 的东西？
你可以让它使用一些sizing utilities 或者根据你使用引导程序的方式，如果你的构建管道中直接有他们的scss，你可以将你自己的大小直接添加到他们的变量和使用实用程序类生成自定义内容。或者你也可以添加自己的media queries 来覆盖响应能力。

【解决方案2】：

我的最佳解决方案是使用column-count: 3，为了提高响应能力，我以一种简单的方式根据屏幕大小更新列数。

使用列数我不必指定高度或其他 css，只需 css 1 行。

【讨论】：