Responsive Bootstrap 4 Grid für Angular 2 ngFür

Question

Ich frage mich, ob es eine Möglichkeit gibt, Elemente, die durch * ngFor in Angular 2 erzeugt werden, ansprechend darzustellen.

Ich benutze Bootstrap 4 Grid-System basierend auf Flex-Eigenschaft. Und ich habe diesen Code in meinem Angular2 App bekam:

<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> 

Was ich will, ist meine Artikel reagierend gemacht zu bekommen, sagen

3 divs in der Reihe auf großen und mittleren -sized Displays

2 divs in der Reihe auf kleine

1 div in der Reihe auf x-small Displays

Answer 1

Sie können das Zeug nicht wirklich mit der Schleife über items Sammlung beziehen. Sie könnten xl, lg, md & sm Klasse mit (wie col-xs-12) Klasse in derselben Zeile verwenden. Bootstrap kümmert sich darum, ein Klasse-über-Element basierend auf der Bildschirmauflösung anzuwenden.

Markup

<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> 

Hinweis: Das Bootstrap v4 Grid-System verfügt über fünf Ebenen der Klassen: xs (extra klein), sm (klein), md (mittel), lg (groß), und xl (extra groß). Sie können fast jede Kombination dieser Klassen verwenden, um dynamischere und flexiblere Layouts zu erstellen.