[英]Angular Reactive Forms template
In the image below, the left one is the current form but I want it to look like the right one (using Flexbox?).在下图中,左边的是当前表单,但我希望它看起来像右边的(使用 Flexbox?)。 How can I achieve this?
我怎样才能做到这一点? I haven't been able to find a solution.
我一直无法找到解决方案。 I am using Angular Material instead of Bootstrap.
我正在使用 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>
You got 2 options你有 2 个选择
Put a grid inside your <mat-form-field>
https://material.angular.io/components/grid-list/examples在
<mat-form-field>
https://material.angular.io/components/grid-list/examples 中放置一个网格
I changed the class names, sooner or later you have to refactor the example-* stuff anyway, I hope thats ok.我更改了类名,无论如何你迟早都要重构 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%;
}
You may try below :您可以尝试以下:
Use class : class ="d-flex" and justifyContent : 'right'使用 class : class ="d-flex" 和 justifyContent : 'right'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.