web-dev-qa-db-ja.com

Angular材料カードを垂直に分離する

カードで縦に並べて並べたいのですが、間にスペースがありません。パディングを使用しようとしましたが、機能しないようです。

カード画像

これらのカードの間隔をどのように設定できますか？

<ng-container *ngIf="titles?.length; else noTitle">
    <mat-card class="asd cardPardding" *ngFor="let title of titles">
      <p>
      {{title}}
      </p>
    </mat-card>
  </ng-container>

  <ng-template #noTitle>
    <mat-card class="asd cardPardding">
      <p>
      No title !
      </p>
  </mat-card>
  </ng-template>

これはCSSです

.asd {
  width: 80%;
  margin: 0 auto; /* Added */
}

.inputasd {
  width: 100%;
}

.cardPadding {
  padding: 100px;
  margin-bottom: 50px;
}
cssangularangular-materialngfor
8
Alperzkn

.component.html

<ng-container *ngIf="titles?.length; else noTitle">
    <mat-card class="my-class-name asd cardPardding" *ngFor="let title of titles">
        <p>
            {{title}}
        </p>
    </mat-card>
</ng-container>

<ng-template #noTitle>
    <mat-card class="asd cardPardding">
        <p>
            No title !
        </p>
    </mat-card>
</ng-template>

.css/.scssファイル

.my-class-name{
    margin-bottom: 10px;
    ... 
}
5
Krishna Rathore

これを修正するには時間がかかりすぎました。それから私は何か間違ったことを知っていると思いましたが、私の間違いはクラス名の1文字だけです。大丈夫、マージンは機能します。クラス名を間違って入力しました。ご回答ありがとうございます。

0
Alperzkn