Angular flex-layout :如何实现引导的.container行为？
Angular flex-layout :如何实现引导的.container行为？
提问于 2017-10-08 23:01:29
我是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？
回答 1
Stack Overflow用户
回答已采纳
发布于 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中定义这个“静态而不是组件动态”的大小。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46632528
复制相关文章
相似问题