css - 有没有办法让垫卡内的内容保持响应？

Question

基本上我有这张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 中的内容保持同样的响应速度？

Answer 1

有几件事正在发生

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

check the demo here - 注意:我删除了路由器 socket 只是为了避免为示例设置路由；