Есть ли способ сохранить контент внутри мат-карты адаптивным?

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, поскольку максимальная ширина карты составляет 400 пикселей ... в то время как классы сетки col-sm применяются, когда ширина составляет 576 пикселей - 768 пикселей
• поэтому мы применяем классы col-[99], так как ширина меньше 576px
• мы можем переопределить отступы и минимальную ширину по умолчанию для очень маленьких экранов (card-fancy-example.css), но такое проектирование будет отличаться от стандартного дизайна угловых материалов

проверьте демонстрацию здесь - примечание: я удалил розетку маршрутизатора, чтобы избежать настройки маршрутизации для образца;