角材料响应用户界面答案

【问题标题】：Angular material responsive ui角材料响应用户界面
【发布时间】：2016-03-27 06:59:56
【问题描述】：

我必须在角材料 css 中开发一个响应式用户界面。我已经安排了 div，因为它在 lg 屏幕中的一行中有 4 个 div，在 md 中为 2 个，在 sm 屏幕上为 1 个。为此，我编写了闲置代码，但没有按预期工作。

<div layout="row">
                            <div flex="100" flex-gt-sm="50" flex-gt-md="25">Name :</div>
                            <div flex="100" flex-gt-sm="50" flex-gt-md="25">Rhushikesh G. lokahnde</div>
                            <div flex="100" flex-gt-sm="50" flex-gt-md="25">Date of Birth :</div>
                            <div flex="100" flex-gt-sm="50" flex-gt-md="25">25th August 1990</div>
                        </div>

【问题讨论】：

为什么不使用flex-sm、flex-md 和flex-gt？你的实际代码是如何工作的？最好强调实际与预期。

标签： css angularjs responsive-design angularjs-material

【解决方案1】：

您需要添加 layout-wrap 否则它不会换行并且内容将在 1 行上。

https://material.angularjs.org/latest/layout/options

【讨论】：