Угловая материальная постоянная ширина группы кнопок

Question

Я пытаюсь иметь постоянную ширину группы кнопок, это не должно зависеть от количества кнопок в ней.Я вставляю свою стековую ссылку и изображение желаемого результата.

https://stackblitz.com/edit/angular-r9zyb9?file=styles.css

Как вы видите визображение, ширина кнопок меняется из-за его количества, но ширина группы кнопок постоянна / одинакова

Answer 1

Вы можете применить немного CSS для этого, в демонстрационных целях я применил его через встроенный стиль в HTML, чтобы вы могли видеть, что он делает, но вы можете использовать собственный класс, если хотите.

Сначала вы устанавливаете ширину группы и поля ... здесь я делаю 80% ширины области просмотра.

<mat-button-toggle-group name="fontStyle" aria-label="Font Style" style="width:80vw; margin:1%">

Затем установите all вашей ширины кнопок на 100%, и она будет усреднять общую ширину контейнера по числу кнопок.

<mat-button-toggle value="bold" style="width:100%">Bold</mat-button-toggle>

Stackblitz

https://stackblitz.com/edit/angular-r9zyb9-j6nu3j?embed=1&file=app/button-toggle-overview-example.html

Answer 2

Используя Bootstrap, вы можете добиться этого ..

<mat-button-toggle-group name="fontStyle" aria-label="Font Style" class="row">
  <mat-button-toggle value="bold" class="col-sm">Bold</mat-button-toggle>
  <mat-button-toggle value="italic" class="col-sm">Italic</mat-button-toggle>
  <mat-button-toggle value="underline" class="col-sm">Underline</mat-button-toggle
</mat-button-toggle-group>

Рабочий стек бликов https://stackblitz.com/edit/angular-r9zyb9-uholwy

Спасибо.