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">，中断点会从同一款式较低的断点（小）。

当然，如果您已经修改了框架指标（断点，最大宽度），您也应该对上述代码持怀疑态度。