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">，medium断点将从较低的断点(小)采用相同的样式。

当然，如果你修改了框架指标(断点，最大宽度)，你也应该修改上面的代码。