Question

我使用角cli 6和角材料2。

我想将每张卡的最大数量限制为8张，中号为4张，小号为1张，但是我不知道如何使用此CSS。这是我的模板。

有很多例子，但是我听不懂。...

您还会知道CSS和角材料2的好教程吗？非常感谢吗？

// html

<div class="grid">
<ng-container  *ngFor="let referentielToDisplay  of referentielsToDisplay | async" >

  <mat-card *ngIf="toppings.value.includes(referentielToDisplay.speSS)">
        <mat-card-title-group>
          <img mat-card-image    src="{{ referentielToDisplay?.url }}" alt="SNFGEu" >
          <mat-card-title><h5>{{ referentielToDisplay?.nomSS }}</h5></mat-card-title>
          <mat-card-subtitle *ngIf="referentielToDisplay?.nomSS2">{{ referentielToDisplay?.nomSS2 }}</mat-card-subtitle>
        </mat-card-title-group>
        <mat-card-content>
          <p>{{ referentielToDisplay?.descriptionSS }}</p>
        </mat-card-content>
        <mat-card-actions>
     <a target="_blank" href="{{ referentielToDisplay?.webSS }}">Accès web</a>
        </mat-card-actions>
      </mat-card>

</ng-container>
</div>

// CSS

.grid {
     display: flex;
    }

    mat-card {
      width: 400px;
      margin: 15px;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
    }

    @media only screen and (max-width: 768px) {
      mat-card {
        margin: 15px 0 !important;
      }
    }
    mat-card:hover {
      box-shadow: 3px 3px 16px -2px rgba(0, 0, 0, .5);
    }
    mat-card-title {
      margin-right: 5px;

    }
    mat-card-title-group {
      margin: 0;
    }

    img {
   width:70px;
   height :70px;

    margin-left: 5px;
    }

    span {
      display: inline-block;
      font-size: 13px;
    }

Answer 1

为了避免不一致，可以使用使用boostrap 4或Angular Flex Layout的网格系统。

Answer 2

最后，我使用了bootstrap：

<div  class="row no-gutter">
  <ng-container *ngFor="let referentielToDisplay  of referentielsToDisplay | async">
      <ng-container  *ngIf="toppings.value.includes(referentielToDisplay.speSS)">
  <div class="col"  >
  <mat-card>
        <mat-card-title-group>
          <img mat-card-image    src="{{ referentielToDisplay?.url }}" alt="SNFGEu" >
          <mat-card-title><h5>{{ referentielToDisplay?.nomSS }}</h5></mat-card-title>
          <mat-card-subtitle *ngIf="referentielToDisplay?.nomSS2">{{ referentielToDisplay?.nomSS2 }}</mat-card-subtitle>
        </mat-card-title-group>
        <mat-card-content>
          <p>{{ referentielToDisplay?.descriptionSS }}</p>
        </mat-card-content>
        <mat-card-actions>
     <a target="_blank" href="{{ referentielToDisplay?.webSS }}">Accès web</a>
        </mat-card-actions>
      </mat-card>
      </div>
    </ng-container> 
       </ng-container>

</div>

显示材料角卡css

2 个答案: