Html 使用引导在10列网格中拟合任意数量的元素

这是我的密码：

<div *ngFor="let minute of state.minutes.specificMinutes.selectedMinutes | keyvalue" class="col-sm-1 checkbox-container">
   <div class="custom-control custom-checkbox">
     <input type="checkbox" (click)="state.minutes.subTab='specificMinutes'"
            class="custom-control-input" id="minute-{{minute.key}}-checkbox"">
     <label class="custom-control-label" for="minute-{{minute.key}}-checkbox">{{minute.key}}</label>
   </div>
</div>

只需在两侧添加一个空列


.control{
宽度：10px；
高度：10px；
边界半径：5px；
填充物：5px；
保证金：2倍；
背景颜色：深粉色；
颜色：白色；
}

*
*
*
*
*
*
*
*
*
*
您可以简单地将
class=“col”
放在10列中，它将在10列中平均分配空间
您可以使用偏移量



上校
上校
上校
上校
上校
上校
上校
上校
上校
上校
因为您有任意数量的项目，所以您可以在组件类中将数组/列表分块到另一个包含10个项目的数组中。然后循环两次

组件类中的示例函数：

chunkArray() {
  let minutes = this.state.minutes.specificMinutes.selectedMinutes;
  let chunks = [];
  let chunkSize = 10;
  for (let i = 0, j = minutes.length; i < j; i += chunkSize) {
    chunks.push(minutes.slice(i, i + chunkSize));
  }

  return chunks;
};

第一个
ngFor
将呈现每个区块的一行。内部元素将渲染实际元素

在内部，使用
class=“col”
将项目均匀地分布到10列中

最好的部分是，如果您的需求更改为每行显示任何其他数量的项目，那么您所要做的就是更改
chunkSize

更新

事实上，因为你不知道你将拥有多少个项目，而且它们不一定是10的倍数，所以你的最后一块可能会少于10个项目。在这种情况下，您可以将标记切换到以下位置：

<div *ngFor="let minutes of getChunks()" class="row">
  <div class="offset-sm-1></div>
  <div *ngFor="let minute of minutes | keyvalue" class="col-sm-1 checkbox-container">
  ...
  </div>
  <div class="offset-sm-1></div>
</div>



…或者在
getChunks（）
函数中，用元素填充最后一个数组，最多填充10个项目。然后在模板中，您必须生成“ghost”元素，直到行的末尾。
创建您的类设置宽度：10%。只需使用“col”，但我有10多个元素，我希望它在一行中达到10个元素时进行换行。
<div *ngFor="let minutes of getChunks()" class="row">
  <div class="offset-sm-1></div>
  <div *ngFor="let minute of minutes | keyvalue" class="col-sm-1 checkbox-container">
  ...
  </div>
  <div class="offset-sm-1></div>
</div>