时间戳

首页 > 解决方案 > 如何使用引导程序以特定方式订购阵列

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

问题描述

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

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

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

标签： cssbootstrap-4

解决方案

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

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

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

推荐阅读