垂直分离 Angular Material 卡片答案

【问题标题】：Separating Angular Material cards vertically垂直分离 Angular Material 卡片
【发布时间】：2019-01-26 14:57:04
【问题描述】：

我想用卡片垂直列出数组中的项目，但它们之间没有空格。我尝试使用填充，但它似乎不起作用。

card image

如何让这些卡片间隔开？

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

【问题讨论】：

margin-bottom: 10px;
我试过了，应该可以，但是不行。
您是否将属性应用于正确的元素？ mat-card { margin-bottom: 10px; }
我将属性应用于正确的元素但错误的类名。这是我的错误。谢谢。

标签： css angular angular-material ngfor

【解决方案1】：

.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;
    ... 
}

【讨论】：

【解决方案2】：

我花了太多时间来解决这个问题。然后我以为我知道错了，但我的错误只是班级名称中的 1 个字母。好吧，保证金有效。我输入了错误的类名。感谢您的回复。

【讨论】：