Angular flex-layout：如何實現Bootstrap的容器行爲？

Question

我是新來的Flex角佈局API，和我有一個基本的問題：

引導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; 
    } 
} 

我怎樣才能實現與純角相同的行爲Flex-Layout API並且不使用任何CSS？

Answer 1

使用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中定義這個「static not component dynamic」大小。