如何在 Angular 中制作响应式对话框？

Question

我在这里遇到了一个情况，我是 angular 新手，并试图使用 angular 对话框来解决问题，但问题是我想让它具有响应性，但它​​没有发生并且完全弄乱了页面的视图。@987654321 @

这是笔记本电脑中的普通对话框视图，但在移动设备上，它的混乱如下mobile view

我的 html 代码是

` 添加员工 清除

<mat-grid-list cols="2" rowHeight="300px" layout-gt-sm="column" layout-sm="row">
    <mat-grid-tile layout-sm="column" flex-sm="100">
        <div class="controles-container" layout-sm="column" flex-sm="100">

            <mat-form-field appearance="outline">
                <mat-label>Employee No</mat-label>
                <input matInput placeholder="employeeNo" formControlName="employeeNo">
            </mat-form-field>

            <mat-form-field appearance="outline">
                <mat-label>Name</mat-label>
                <input matInput placeholder="name" formControlName="name">

            </mat-form-field>

            <mat-form-field appearance="outline">
                <mat-label>Design</mat-label>
                <input matInput placeholder="design" formControlName="design">


            </mat-form-field>
        </div>
    </mat-grid-tile>
    <mat-grid-tile layout-sm="column" flex-sm="100">
        <div class="controles-container" layout-sm="column" flex-sm="100">
            <mat-form-field appearance="outline">
                <mat-label>Age</mat-label>
                <input matInput placeholder="age" formControlName="age">
            </mat-form-field>

            <mat-form-field appearance="outline">
                <mat-label>Phone</mat-label>
                <input matInput placeholder="phone" formControlName="phone">
            </mat-form-field>

            <mat-form-field appearance="outline">
                <mat-label>E-mail</mat-label>
                <input matInput placeholder="email" formControlName="email">
            </mat-form-field>


            <nav id="Buttons">

                <button class="ilogin" mat-raised-button color="primary" routerLinkActive="active" type="submit" [disabled]="!myForm.form.valid">Save</button>
                <button id="Cancel" mat-raised-button color="" routerLinkActive="active" (click)="onClose()">Cancel</button>
            </nav>
        </div>
    </mat-grid-tile>
</mat-grid-list>

`

Answer 1

您不会使对话框响应。您需要使内容具有响应性。

首先你需要决定你想要发生什么。有两种解决方法。

1. 取右侧，放在左侧三项下方
2. 取左边的第一个，然后如果是右边的，则取其下方的第一个，依此类推。

解决方案是使用引导程序 col 类

检查引导网格系统https://getbootstrap.com/docs/4.0/layout/grid/ 以获取示例。

如果您选择第二个选项，则需要更改 html 以创建行而不是使用两列。