我是Angular Flex-layout API的新手,我有一个基本问题:
Bootstrap 4的.container类如下:
.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
width: 100%;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
如何使用纯Angular Flex-Layout API实现相同的行为,而不使用任何CSS?
发布于 2017-10-13 03:40:23
您不能使用flex-layout中的标准断点执行完全相同的操作,因为它们是不同的断点。参见https://github.com/angular/flex-layout/wiki/Responsive-API。
但是,您可以使用带有修饰符的响应式API来指定不同的容器最大宽度。类似于:
<div class="content"
fxFlex.gt-xs="500px"
fxFlex.gt-sm="800px"
fxFlex.gt-md="1000px"
fxFlex.gt-lg="1140px">
</div>
您还可以根据需要实现自己的断点。
说了这么多,我仍然想在我的css中定义这个“静态而不是组件动态”的大小。
https://stackoverflow.com/questions/46632528
复制相似问题