在下图中,左边的是当前表单,但我希望它看起来像右边的(使用 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>
最佳答案
你有两个选择
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%;
}
关于css - Angular 响应式表单模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59811441/