用于响应式设计的材料单选按钮组中的材料卡

Question

使用角材料构建角应用程序。用户可以选择通过信用卡或银行账户转账 klarna 支付。 因此，在具有 2 个单选按钮选项的单选按钮组中，每个单选按钮都有素材卡。 现在每个都有具有不同文本大小的图像。 如何在响应式设计中使材料卡具有相同的尺寸。 我曾尝试使用 Bootstrap、Angular Flex Layout、好的旧 CSS，但都失败了。

问题是材料卡本身，只要它们不是单选按钮的一部分，我就可以将它们保持相同的大小。所以请帮忙。 在此处查看 Angular 应用的堆栈闪电战：

https://stackblitz.com/edit/angular-ivy-nykksq?devtoolsheight=33&file=src/app/app.component.html

这就是我希望它在所有屏幕尺寸上的样子：

enter image description here

Answer 1

我使用 css flexbox 和媒体查询修复了它。见：

https://stackblitz.com/edit/angular-ivy-f1sjdd?file=src/app/app.component.css

最重要的是，必须设置材料卡和材料卡标题的宽度。 为了使标题有自动换行，我们应该使用空格：正常

就是这样。