Angular *ngFor 循环 bootstrap 5 个网格列不正确

Question

我正在使用 Angular 13 和 Bootstrap 5 并尝试做一个循环，在网格上得到 2 列。

数据是一个数组：

items = [1, 2, 3 ,4];

然后我有这个：

<div class="container" *ngFor="let item of items">
    <div class="row">
      <div class="col-md-6">

        <div class="card">
            <div class="card-header">
              Heading here
            </div>
            <div class="card-body">
             Body here
            </div>
          </div>

      </div>
    </div>
  </div>

出于某种原因，我只在 1 列而不是 2 列中得到 4 张卡片...所以它在一列中给了我 4 个项目，我需要 2 行，每行 2 个项目。

我该怎么做？

Answer 1

您正在容器上循环，将 ngFor 移动到您的 col-md-6:

<div class="container">
    <div class="row">
      <div class="col-md-6" *ngFor="let item of items">

        <div class="card">
            <div class="card-header">
              Heading here
            </div>
            <div class="card-body">
             Body here
            </div>
          </div>

      </div>
    </div>
  </div>

Angular *ngFor 循环 bootstrap 5 个网格列不正确

Angular *ngFor loop in bootstrap 5 grid columns not right

angular

bootstrap-5

angular13