逐行显示两列引导角度

Question

我的组件文件中有一个包含 4 个数据的 arrayData，我想在两行中显示它的两列。

myArrayData = [{id:1,pictureURL:'asset:mypict1.png'},{id:2,pictureURL:'asset:mypict2.png'}, {id:3,pictureURL:'asset:mypict3.png'} ,{id:4,pictureURL:'asset:mypict4.png'}] <div class="row"> <div class="col-md-6" *ngFor="let cat of myArrayData; let index=index"> <div class="card"> <a href="#" > <img [src]="cat.pictureURL" /> </a> </div> </div> </div>

但它不起作用；我想要两行两列。 有什么想法吗？

Answer 1

你见过这个例子吗？ https://getbootstrap.com/docs/4.0/layout/grid/#equal-width-multi-row

基本上，您可以使用w-100 类“强制”一个新行。

我会像这样处理它，您将在其中每 2 条记录插入一个新的行元素：

 <div class="row">
   <ng-container *ngFor="let cat of items; let index=index">
      <div class="col-md-6">
        <div class="card">
          <a href="#"  >
            <img [src]="cat.pictureURL"
            />
         </a>
        </div>
      </div>
      <div class="w-100" *ngIf="(index+1) % 2 === 0"></div>
   </ng-container>
  </div>