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">，则中断点将从较低断点（小）开始采用相同的样式。

当然，如果您修改了框架指标（断点，最大宽度），您也应该考虑上述代码。