Question

我想知道是否有办法在Angular 2中呈现由* ngFor创建的响应元素？

我使用基于flex属性的Bootstrap 4网格系统。我在Angular2应用程序中得到了这段代码：

<div class="outlet container">
<div class="row itemsBlock">
   <div *ngFor="let item of items" class="itemRender">
        <img class="itemImage" src="{{item.image}}" />
        <span class=itemitle">{{item.title}}</span>
   </div>
</div>

我想要的是让我的项目得到回应，比如说

大型和中型显示器上的行中有3个div

小行上的2个div

x-small显示屏上的行中的1个div

Answer 1

你无法将这些内容与items集合上的循环相关联。您可以使用xl，lg，md＆amp;同一行sm上的col-size-number类（如col-xs-12）类。 Bootstrap会根据屏幕分辨率在元素上应用类。

<强>标记

<div class="row itemsBlock">
   <div *ngFor="let item of items" class="col-md-4 col-sm-6 col-12">
        <img class="itemImage" src="{{item.image}}" />
        <span class=itemitle">{{item.title}}</span>
   </div>
</div>

注意：Bootstrap v4网格系统有五层类：xs （超小），sm（小），md（中），lg（大）和xl（额外的）大）。您几乎可以使用这些类的任意组合来创建更加动态和灵活的布局。

响应Bootstrap 4网格用于Angular 2 ngFor

1 个答案: