有没有办法将内容保持在 mat-card 响应？答案

【问题标题】：Is there a way to keep the content inside a mat-card responsive?有没有办法将内容保持在 mat-card 响应？
【发布时间】：2019-09-28 09:19:16
【问题描述】：

基本上我有这个mat-card：

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

对于每个元素，我都有这个HTML：

<div *ngIf="site" class="col-xs site-details">
  <div>
    <tr>
      <td class="col-sm-6"><label>http://www.{{site._source.url}}.com.br</label></td>
      <td class="col-sm-2">
        <a routerLink="editSite/{{site._id}}" style="text-decoration: none; color: white"
          routerLinkActive="active">
          <button mat-raised-button color="primary">
            Editar
          </button>
        </a>
      </td>
      <td class="col-sm-2"><button mat-raised-button color="warn"
          (click)="openConfirmationDialog('excluir',site._source.url)">Excluir
        </button></td>
      <td class="col-sm-2"> <a target="_blank" href="http://www.{{site._source.url}}.com.br" title="Ir ao site"><button
            mat-raised-button>Ir ao site</button></a>
      </td>
    </tr>
  </div>
  <hr>
</div>

<router-outlet></router-outlet>

问题是当我切换到移动视觉时，我的按钮会脱离mat-card：

有没有办法让mat-card 中的内容保持同样的响应？

【问题讨论】：

标签： css angular typescript angular-material

【解决方案1】：

发生了一些事情

您正在使用无响应的表 (tr, td)，为了响应，您必须使用 div
您使用的类是引导类，如果您包含引导 CSS（我在 index.html 中做了），它将与 <div> 一起使用
col-sm-6 or col-sm-2 组合（来自 Bootstrap）不适用于 Angular-material 卡片，因为卡片的最大宽度为 400 像素……而当宽度介于 576 像素之间时，将应用 col-sm 网格类- 768 像素
所以我们应用 col-[99] 类，因为宽度小于 576px
我们可以为非常小的屏幕（card-fancy-example.css）覆盖填充和默认最小宽度，但这样的设计将不同于标准的角度材料设计

check the demo here - 注意：我移除了路由器插座只是为了避免为示例设置路由；

【讨论】：