Как заказать массив указанным c способом с bootstrap

Question

В моем проекте angular 8 я хочу упорядочить массив следующим образом:

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

Этот список получен из вызова GET, поэтому я не знаю, сколько там элементов, и это необходимо быть максимально отзывчивым. Я использую Bootstrap 4.x и пытаюсь добиться этого с помощью свойства flex-direction, но мне чего-то не хватает. Есть ли простой способ сделать это?

Answer 1

Не уверен, что только классы утилит grid / flex bootstrap дадут вам полное решение для ваших требований, поскольку вам неизбежно придется каким-то образом указывать максимальную высоту для контейнера, чтобы вызывать правильную упаковку. дочерних элементов, которые вы повторяете.

Так что вот быстрый подход, чтобы сделать то же самое, если вы хотите, мы могли бы преобразовать некоторые из них в служебные классы, и я думаю, просто шлепать adho c способ сузить контейнер и вызвать обтекание, чтобы получить тот же результат и сделать его более boostrap'i sh ...

.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>

Answer 2

Лучшее решение для меня - использовать column-count: 3, и для отзывчивости я легко обновляю счетчик столбцов на основе размера экрана.

При подсчете столбцов указывать не нужно высота или другое css, просто css 1 строка.