我有一个带有 6 个按钮切换的垫子按钮切换组。
在桌面上,所有按钮都应该在一行中。在较小的屏幕上,该组应该打破并显示 2 行按钮,如下所示:
到目前为止,这是我的代码(我正在使用 flexbox-grid):
<mat-button-toggle-group class="col-xs-12">
<mat-button-toggle class="col-xs-4 col-lg-2" value="1">1 Monat</mat-button-toggle>
<mat-button-toggle class="col-xs-4 col-lg-2" value="3">3 Monate</mat-button-toggle>
<mat-button-toggle class="col-xs-4 col-lg-2" value="6">6 Monate</mat-button-toggle>
<mat-button-toggle class="col-xs-4 col-lg-2" value="12">1 Jahr</mat-button-toggle>
<mat-button-toggle class="col-xs-4 col-lg-2" value="60">5 Jahre</mat-button-toggle>
<mat-button-toggle class="col-xs-4 col-lg-2" value="120">10 Jahre</mat-button-toggle>
</mat-button-toggle-group>
如果在桌面上工作正常,但在移动屏幕尺寸上,只有 3 个按钮可见(应该在第二行的三个不可见):如何让我的 mat-button-toggle-group 分成两行?
最佳答案
您必须设置 flex-wrap
属性(property)给 wrap
对于切换组元素:
mat-button-toggle-group {
flex-wrap: wrap;
}
然后按照您的喜好修复边界。
关于css - 使 Angular Material Mat-Button-Toggle-Group 响应式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54332789/