Как я могу обосновать содержание между иконками, используя ng- bootstrap в Angular 8

Question

У меня есть четыре значка рядом друг с другом, но я хочу, чтобы они были разделены на один и тот же размер пространства, я использую класс justify-content-between, но не сработало, как я могу это сделать

Я делаю PWA для телефонов

• Ниже я дам код, а также изображение того, как я хочу его и что у меня есть до сих пор, я использую bootstrap и angular материал

Код, который имеет значки

<div class="main flex down fixed-bottom" >
<mat-toolbar class="colour">
    <mat-toolbar-row>

    <div class="row justify-content-between">
        <div class=" icons "> 
            <button mat-icon-button class="icons col-xs-3" >
                <mat-icon>home</mat-icon>
            </button>
            <button mat-icon-button class="icons col-xs-3" >
                <mat-icon>email</mat-icon>
            </button>
            <button mat-icon-button  class="icons col-xs-3">
                <mat-icon>add_comment</mat-icon>
            </button>
            <button mat-icon-button class="icons col-xs-3" >
                <mat-icon>title</mat-icon>
            </button>
        </div>
    </div>
    </mat-toolbar-row>
</mat-toolbar>
</div>

Вот так это выглядит

Вот как я хотите, чтобы они были

Answer 1

Вот как я это решаю

<div class="main flex down fixed-bottom" >
    <mat-toolbar class="colour">
        <mat-toolbar-row>
            <div class="container icons">
                <div class=" row justify-content-between">
                    <button mat-icon-button class=" col-xs-3">
                        <mat-icon>home</mat-icon>
                    </button>
                    <button mat-icon-button class=" col-xs-3">
                        <mat-icon>email</mat-icon>
                    </button>
                    <button mat-icon-button class=" col-xs-3">
                        <mat-icon>add_comment</mat-icon>
                    </button>
                    <button mat-icon-button class=" col-xs-3">
                        <mat-icon>title</mat-icon>
                    </button>
                </div>
            </div>
        </mat-toolbar-row>
    </mat-toolbar>
</div>

Answer 2

Создайте свою структуру Div следующим образом.

<div class="main flex down fixed-bottom" >
<mat-toolbar class="colour">
    <mat-toolbar-row>

        <div class=" icons row justify-content-between"> 
            <button mat-icon-button class="icons col-xs-3" >
                <mat-icon>home</mat-icon>
            </button>
            <button mat-icon-button class="icons col-xs-3" >
                <mat-icon>email</mat-icon>
            </button>
            <button mat-icon-button  class="icons col-xs-3">
                <mat-icon>add_comment</mat-icon>
            </button>
            <button mat-icon-button class="icons col-xs-3" >
                <mat-icon>title</mat-icon>
            </button>
        </div>

    </mat-toolbar-row>
</mat-toolbar>
</div>