我想要3个断点。一般来说,我想为小型、中型和大型窗格配置网格。
查看基础网格的文档,为“小”和“大”提供了示例类名。
然而,我怀疑基金会可以更灵活。所以我查看了文件 _foundation-global.scss。果然,它似乎具有适用于一系列窗格尺寸的数学函数和变量。
在网格文档中,我可以看到“small-12”和“large-3”等类名。
理想情况下,我想做一些类似“medium-3”的事情。我可以用基金会的网格做这样的事情吗?如果是这样,怎么办?
在 Zurb Foundation 4 中,我通过以下内容向网格列添加了 Medium。只需将其添加到基础全局变量和网格的 @import 之后即可。
@if $include-html-grid-classes != false {
/* Styles for screens that are atleast 768px and max width 1024px */
@media #{$small} and (max-width: 1024px) {
@for $i from 1 through $total-columns {
.medium#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
}
@for $i from 0 through $total-columns - 1 {
.row .medium-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
}
@for $i from 1 through $total-columns - 1 {
.push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
.pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
}
.column.medium-centered,
.columns.medium-centered { @include grid-column($center:true, $collapse:null, $float:false); }
.column.medium-uncentered,
.columns.medium-uncentered {
margin-#{$default-float}: 0;
margin-#{$opposite-direction}: 0;
float: $default-float !important;
}
.column.medium-uncentered.opposite,
.columns.medium-uncentered.opposite {
float: $opposite-direction !important;
}
}
}
现在您可以像使用小网格和大网格一样使用中网格。
https://gist.github.com/poeticninja/5985220 https://gist.github.com/poeticninja/5985220
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)