javascript - Angular 2 FlexLayout - 使用断点更改页面内容

Question

我正在学习 Angular，现在我要制作一个登录表单，类似于使用 Angular2、Angular Material 和 Flex-Layout（全部来自 Angular）的 Gmail 页面。
到目前为止一切都很好，唯一的问题是我不知道如何更改卡，因此在 Gmail 页面上div使用时它会填满整个屏幕。 我怎样才能做到这一点？fxFlex.lt-sm

到目前为止我所做的： https ://plnkr.co/edit/X8Rs7QHaMG9XzB1LTkbR?p=preview

普通卡

没有卡

Answer 1

如果表单的容器具有页面的宽度，那么设置 fxFlex.lt-sm="100%" 应该可以工作。但是，如果您使用 fxLayout=column 而不是 row 那么它会将您的最大高度设置为 100%，因此您需要手动设置宽度。

如果这没有帮助，请发布您的 html 代码，我会更新我的答案

编辑

<!-- Card -->
  <div style="width: 100%" fxLayoutAlign="center center">
    <md-card fxFlex="448px" fxFlex.lt-sm="100%"> 

如果你这样修改似乎工作