Angular4.0 引入bootstrap 4.0 中的 缩略图效果 thumbnail 问题

Question

单独就而言，类名变了，添加位置在<img>标签里了，如：<img src="..." alt="..." class="img-thumbnail">

在bootstrap3.3.7版本中，有带padding的如下缩略图效果：

但是在bootstrap4.0中变化了，没有padding，如下图：（地址：https://getbootstrap.com/docs...）

是需要自己调整吗，还是我找的地方不对呢？

Answer 1

这样写可以（img-thumbnail 和 card 结合）

<div  class="img-thumbnail">
    <img class="card-img-top" [src]="imgUrl" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">{{product.price}} 元</h5>
      <h5 class="card-title"><a [routerLink]="['/product', product.id]">{{product.title}}</a></h5>
      <p class="card-text">{{product.desc}}</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>