并列图像在角度2，bootstrap 4

Question

我无法并排呈现图片

  <div class="row">
       <div class="col">
           <div *ngFor="let ir of imagesSource">
                <div class="row">
                    <div class="col-md-3">
                                            <img class="fade images" src="{{ir?.contentUrl}}" (click)="ImageSource(ir?.hostPageUrl)" frameborder="0" allowfullscreen>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

如何并排渲染图像，每行3个

Answer 1

你已经将行计算除以12.由于你在错误的位置保持ngFor，它会用单个项目重复行。你可以只用一个简单的行作为包装div，并用col-md-3

重复内部div

<div class="row">
      <div class="col-md-3" ngFor="let ir of imagesSource">
         <img class="fade images" 
            src="{{ir?.contentUrl}}" 
            (click)="ImageSource(ir?.hostPageUrl)" frameborder="0" allowfullscreen>
      </div>
</div>

Answer 2

试试这个我希望是帮助

<div class="row">
   <div *ngFor="let ir of imagesSource" class="col-md-3">
       <img class="fade images" src="{{ir?.contentUrl}}" (click)="ImageSource(ir?.hostPageUrl)" frameborder="0" allowfullscreen>
   </div>          
</div>