使 Angular Material Mat-Button-Toggle-Group 响应

Question

我有一个带有 6 个按钮开关的 mat-button-toggle-group。在桌面上，所有按钮都应排成一行。在较小的屏幕上，该组应该中断并显示 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 分成两行？

Answer 1

您必须将切换组元素的 flex-wrap 属性设置为 wrap:

mat-button-toggle-group {
  flex-wrap: wrap;
}

然后根据需要修改边框即可。

使 Angular Material Mat-Button-Toggle-Group 响应

Make Angular Material Mat-Button-Toggle-Group responsive

css

angular

angular-material

flexboxgrid