Angular Шаблон Reactive Forms

Question

На изображении ниже левая является текущей формой, но я хочу, чтобы она выглядела как правая (используя Flexbox?). Как мне этого добиться? Я не смог найти решение. Я использую Angular Материал вместо Bootstrap.

 <div class="container">

<mat-card>

        <mat-card-title>Filter</mat-card-title>

        <mat-card-content>
            <div class="example-container">


                <form class="example-form">

                    <mat-form-field class="example-full-width">
                        <mat-label>Ontvangst op fabriek</mat-label>
                        <select matNativeControl required>
                            <option value="volvo">Volvo</option>
                            <option value="saab">Saab</option>
                            <option value="mercedes">Mercedes</option>
                            <option value="audi">Audi</option>
                        </select>
                    </mat-form-field>

                    <mat-form-field class="example-full-width">
                        <mat-label>Losplaats</mat-label>
                        <select matNativeControl required>
                            <option value="volvo">Volvo</option>
                            <option value="saab">Saab</option>
                            <option value="mercedes">Mercedes</option>
                            <option value="audi">Audi</option>
                        </select>
                    </mat-form-field>

                    <mat-form-field class="example-full-width">
                        <mat-label>Leverancier</mat-label>
                        <select matNativeControl required>
                            <option value="volvo">Volvo</option>
                            <option value="saab">Saab</option>
                            <option value="mercedes">Mercedes</option>
                            <option value="audi">Audi</option>
                        </select>
                    </mat-form-field>

                    <mat-form-field>
                        <input matInput [matDatepicker]="picker" placeholder="Choose a date">
                        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                        <mat-datepicker #picker></mat-datepicker>
                      </mat-form-field>


                </form>

            </div>

            <mat-card-actions>
                <button mat-raised-button (click)="login()" color="primary">Zoeken</button>
            </mat-card-actions>
        </mat-card-content>


</mat-card>

Надеюсь, кто-то может помочь мне с этот.

Answer 1

У вас есть 2 варианта

1. Используйте Angular Материал

Поместите сетку внутри вашего <mat-form-field> https://material.angular.io/components/grid-list/examples

2. Использовать пользовательские CSS

Я изменил имена классов, рано или поздно вам придется все равно реорганизовать материал example- *, надеюсь, это нормально.

<mat-form-field class="filter--item">
    <mat-label class="filter--item-label">Leverancier</mat-label>
    <select class="filter--item-select" matNativeControl required>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</mat-form-field>

.filter--item {
    display: flex;
}

.filter--item .filter--item-label {
    width: 30%;
}

.filter--item .filter--item-select {
    width: 70%;
}

Answer 2

Вы можете попробовать ниже:

Используйте class: class = "d-flex" и justifyContent: 'right'