Foundation6:扩展的断点行
问题描述:
我想要改变行扩展如下的不同断点。基本上允许扩大到中等以下,未超过大的断点。Foundation6:扩展的断点行
<div class="small-expanded large-unexpanded row">
<div class="small-12 columns"></div>
</div>
我知道这个类不可用,但我该如何做到这一点。
答
我不知道你为什么要这样做,行自动扩展到可用宽度,直到达到最大宽度,然后停留在该宽度(默认最大宽度为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">
,中断点会从同一款式较低的断点(小)。
当然,如果您已经修改了框架指标(断点,最大宽度),您也应该对上述代码持怀疑态度。