Question

基本上我有这个logback-1.2.3：

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中的内容保持同样的响应速度？

Answer 1

发生了一些事情

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

check the demo here-注意：为了避免为样本设置路由，我删除了路由器插座；

有没有办法使mat-card卡中的内容保持响应状态？

1 个答案: