Question

我有一个包含多个输入字段的角度材质页面。这些是在两个虚拟的盒子中订购的＃34;如果屏幕较大，则应在小屏幕上并排显示这些框。

Input 1         Input 4
Input 2         Input 5
Input 3

在更大的屏幕上。在较小的屏幕上：

Input 1
Input 2
Input 3
Input 4
Input 5

我在每个＆＃34;块周围使用<div layout="column">＆＃34;以及<div layout="row" layout-gt-xs="column">。

周围的一切

我的问题是，第二个块与大屏幕上的第一个块一样高，输入字段不在同一行，这看起来并不好。看起来更像是这样：

Input 1         Input 4

Input 2
                Input 5
Input 3

为了使输入1和4（2和5）出现在同一行（如第一个例子中），我该怎么做？如果我使用<md-grid-list>项目顺序在小屏幕上混乱，那么它实际上不是一个选项。

以下是完整的代码示例：http://plnkr.co/edit/HrkLYYEowL31zqD0Jqq2?p=preview

提前致谢。

Answer 1

如何删除输入4和5的flex属性？

<div flex layout="column">

    <md-input-container >
        <label>Input 4</label>
        <input type="text" value="Mock-Text" />
    </md-input-container>
    <md-input-container >
        <label>Input 5</label>
        <input type="text" value="Mock-Text" />
    </md-input-container>

</div>

Angular Material divs应该以相同的方式包装它们的内容

1 个答案: