如何在 angular2 材质的 md-card 中添加填充？答案

【问题标题】：How to add padding in md-card in angular2 material?如何在 angular2 材质的 md-card 中添加填充？
【发布时间】：2017-08-22 04:20:26
【问题描述】：

如何在 angular2 材质的 md-card 中添加填充？我正在使用 md-card 显示我的产品列表，但我无法在它们上添加填充，这就是我所做的：

product.component.html：

<p>
  Product List
</p>

<div class="container">
  <div class="col-sm-2 filter-area">
    <div>Filter area</div>
    <div>Search area</div>
    <div>Category area</div>
    <div>Widget area</div>
  </div>
  <div class="col-sm-10">
    <md-card class="example-card" *ngFor="let data of (myData ? myData.slice(0,5): []); let i = index">

        <img md-card-image src="{{ data.url }}">
        <md-card-header>
          <md-card-title>{{ data.title }}</md-card-title>
        </md-card-header>

        <md-card-actions>
          <button md-button>Add to Cart</button>
          <button md-button>Buy Now</button>
        </md-card-actions>

      </md-card>
  </div>
</div>

这是我的 product.component.ts ：

  myData: Array<any>;

  constructor(private http:Http) {
    this.http.get('https://jsonplaceholder.typicode.com/photos')
      .map(response => response.json())
      .subscribe(res => this.myData = res);
  }

这就是我展示我的 JSON 数据的方式，它是我用来对我的设计进行原型设计的示例 JSON 数据。下面是我使用的 5 个 json 数据（如果你在我的构造函数中触发 url，它应该如下所示）：

[

    {
        "albumId": 1,
        "id": 1,
        "title": "accusamus beatae ad facilis cum similique qui sunt",
        "url": "http://placehold.it/600/92c952",
        "thumbnailUrl": "http://placehold.it/150/92c952"
    },
    {
        "albumId": 1,
        "id": 2,
        "title": "reprehenderit est deserunt velit ipsam",
        "url": "http://placehold.it/600/771796",
        "thumbnailUrl": "http://placehold.it/150/771796"
    },
    {
        "albumId": 1,
        "id": 3,
        "title": "officia porro iure quia iusto qui ipsa ut modi",
        "url": "http://placehold.it/600/24f355",
        "thumbnailUrl": "http://placehold.it/150/24f355"
    },
    {
        "albumId": 1,
        "id": 4,
        "title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",
        "url": "http://placehold.it/600/d32776",
        "thumbnailUrl": "http://placehold.it/150/d32776"
    },
    {
        "albumId": 1,
        "id": 5,
        "title": "natus nisi omnis corporis facere molestiae rerum in",
        "url": "http://placehold.it/600/f66b97",
        "thumbnailUrl": "http://placehold.it/150/f66b97"
    }
]

这是我的 css 文件 product.component.css ：

.example-card {
    width: 220px;
    float: left;
    padding: 30px;
  }

.filter-area {
    background-color: peachpuff;
}

这是我的应用程序截图：

如何在那里添加填充？

【问题讨论】：

标签： html css angular responsive-design angular-material2

【解决方案1】：

对于 md-card 不能应用填充。所以创建 div 并应用填充。

<div class="col-md-10"> 
    <md-card>
        <div class="example-card" style="background-color: #40DEC8;">
            <img md-card-image src="{{ data.url }}">
        <md-card-header>
          <md-card-title>{{ data.title }}</md-card-title>
        </md-card-header>

        <md-card-actions>
          <button md-button>Add to Cart</button>
          <button md-button>Buy Now</button>
        </md-card-actions>
        </div>
        <!-- Other html -->
    </md-card>
</div>

【讨论】：

谢谢！这是真的，我不能在 md-card 中应用填充，它现在可以工作了，谢谢

【解决方案2】：

将你的卡片放在一个 div 中并为类添加填充。根据需要使用 firstchild 和 lastchild 创建 CSS 类。不要像我在这里那样使用内联 css。

<div layout="column" style="padding : 10px;">
  <md-card>Simple card</md-card>
</div>
<div layout="column" style="padding : 10px;">
  <md-card>Simple card</md-card>
</div>
<div layout="column" style="padding : 10px;">
  <md-card>Simple card</md-card>
</div>

【讨论】：