Foundation6：擴展的斷點行

Question

我想要改變行擴展如下的不同斷點。基本上允許擴大到中等以下，未超過大的斷點。

<div class="small-expanded large-unexpanded row"> 

    <div class="small-12 columns"></div> 

</div> 

我知道這個類不可用，但我該如何做到這一點。

Answer 1

我不知道你爲什麼要這樣做，行自動擴展到可用寬度，直到達到最大寬度，然後停留在該寬度（默認最大寬度爲1200px，可以更改定製器或SASS設置），但是我們可以創建你提到的那些類。

代碼：（假設你正在使用標準斷點）

/* small and up */ 
.row.small-expanded { max-width: none } 
.row.small-unexpanded { max-width: 75em } 

@media screen and (min-width: 40em) { /* medium and up */ 
    .row.medium-expanded { max-width: none } 
    .row.medium-unexpanded { max-width: 75em } 
} 
@media screen and (min-width: 40em) { /* large and up */ 
    .row.large-expanded { max-width: none } 
    .row.large-unexpanded { max-width: 75em } 
} 

此代碼的移動先行，因此，如果你有<div class="small-expanded large-unexpanded">，中斷點會從同一款式較低的斷點（小）。

當然，如果您已經修改了框架指標（斷點，最大寬度），您也應該對上述代碼持懷疑態度。