如何将标签放在bootsInput之类的matInput上方

Question

我正在将一种引导程序形式转换为一种实质形式。在下面的照片中，我希望mat-form-field看起来像第二个bootstrap输入

但是我无法在matInput顶部获得标签

我已经尝试过在标签标签中使用for属性：

            <div class="form-group">
                <label for="paysAdresse">Pays : </label>
                <mat-form-field appearance="outline">
                    <mat-label>Pays :</mat-label>
                    <input matInput id="paysAdresse"  formControlName="pays" placeholder="pays">
                </mat-form-field>
            </div>
            <div class="form-group">
                <label for="voieAdresse">Voie : </label>
                <input id="voieAdresse" formControlName="voie" type="text" class="form-control form-control-sm" >
            </div>

但是它给了我标签和输入在同一行。 如何获得想要的结果？

Answer 1

可以使用Flex布局轻松实现：
使用 flex-direction: column:The flexible items are displayed vertically, as a column
将此添加到您的组件CSS文件

.form-group{
  display: flex;
  flex-direction: column;
}

修改过的HTML

<div class="form-group">
    <label for="paysAdresse">Pays : </label>
    <mat-form-field appearance="outline">
        <input matInput id="paysAdresse" formControlName="pays" placeholder="pays">
    </mat-form-field>
</div>

liveDemo