标签: flexboxgrid

在Flexboxgrid框架我看到margin的-1rem在.row类。在小视口中，这会创建容器的小水平滚动。

由于我在其他框架上看到过这种负边距，它的目的是什么？内列具有相同数量的填充，相反。

图中红线为.container，虚线为.row。顺便说一句，边距仅在右侧可见。

我有一个带有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分成两行？