时间戳

首页 > 解决方案 > Is there a way to keep the content inside a mat-card responsive?

css - Is there a way to keep the content inside a mat-card responsive?

问题描述

Basically I have this 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>

And for each element I have this 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>

The problem is that when I change to the mobile vision my buttons get out of the mat-card:

Is there a way to keep the content inside the mat-card equally responsive?

标签： cssangulartypescriptangular-material

解决方案

有几件事正在发生

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

在此处查看演示- 注意：我删除了路由器插座只是为了避免为示例设置路由；

推荐阅读