css - Angular 响应式表单模板

Question

在下图中，左边的是当前表单，但我希望它看起来像右边的(使用 Flexbox？)。我怎样才能做到这一点？我一直无法找到解决方案。我正在使用 Angular Material 而不是 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>

</div>

Answer 1

你有两个选择

1。使用 Angular Material

在你的 <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%;
}