Css 有没有办法让mat卡中的内容保持响应？

基本上我有这个

垫卡

：

<mat-card>
 <mat-card-content>
      <div *ngFor="let siteSource of siteSources | paginate: { itemsPerPage: 5, currentPage: page};">
        <site-details [site]='siteSource'></site-details>
      </div>
    </mat-card-content>
</mat-card>

问题是，当我切换到移动视觉时，我的按钮会从

mat卡

：

<mat-card>
 <mat-card-content>
      <div *ngFor="let siteSource of siteSources | paginate: { itemsPerPage: 5, currentPage: page};">
        <site-details [site]='siteSource'></site-details>
      </div>
    </mat-card-content>
</mat-card>

---

有没有办法使

mat卡中的内容保持同样的响应能力？
有一些事情正在进行


您使用的表（tr，td）没有响应性，对于响应性，您必须使用div
您使用的类是引导类，如果您包含引导CSS（我在index.html中使用过），那么它将与
一起使用
col-sm-6或col-sm-2
组合（来自引导）不适用于角材质卡，因为该卡的最大宽度为400px。。。同时，当宽度介于576px-768px之间时，将应用
列sm
网格类
因此我们应用
col-[99]
类，因为宽度小于576px
对于非常小的屏幕（card fancy example.css），我们可以覆盖padding&默认的最小宽度，但是这样的设计将不同于标准的角度材质设计

-注意：我移除路由器插座只是为了避免为样本设置路由