时间戳

首页 > 解决方案 > 逐行显示两列引导角度

jquery - 逐行显示两列引导角度

问题描述

我的组件文件中有一个包含 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>

但它不起作用；我想要两行两列。任何想法 ？

标签： jquerycssangularbootstrap-4

解决方案

你见过这个例子吗？ 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>

推荐阅读