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

Question

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

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

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

最重要的是要设置素材卡的宽度和素材卡的标题。 为了让标题有自动换行，我们应该使用 white-space: normal

就是这样。