Question

我在这里遇到了一个情况，是角度的新手，正在尝试使用角度对话框，但是问题是我希望使其具有响应性，但不会发生，并且完全弄乱了页面的视图。{{ 3}}

这是笔记本电脑中的常规对话框视图，但涉及移动设备时，其混乱情况如下enter image description here

我的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

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

首先，您需要确定要发生的事情。有两种解决方法。

将右侧放在左侧的三个项目下面
以左边的第一个为准，然后以右边的第一个为准，依此类推。

解决方案是使用引导col类

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

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

如何在Angular中创建一个响应式对话框？

1 个答案: