如何在 Zurb Foundation 4 中使用断点? [英] How do I make use of breakpoints in Zurb foundation 4?
问题描述
我想要 3 个断点.从广义上讲,我想为小型、中型和大型窗格配置网格.
I would like to have 3 breakpoints. Broadly speaking, I want to configure my grid for small, medium and large panes.
查看基础网格的文档,为小"和大"提供了示例类名.
Looking at the docs for foundations grid, example classnames are provided for "small" and "large".
但是,我怀疑基础可以更灵活.所以我查看了文件_foundation-global.scss.果然,它似乎具有适用于一系列窗格大小的数学函数和变量.
However, I suspect foundation can be more flexible then that. So I looked at the file _foundation-global.scss. Sure enough, it seems to have maths function and variables for a range of pane sizes.
在 grid 的文档中,我可以看到诸如small-12"和large-3"之类的类名.
In the docs for grid, I can see classnames like 'small-12' and 'large-3'.
理想情况下,我想做中等-3"之类的事情.我可以用基金会的网格做这样的事情吗?如果是这样,如何?
Ideally I'd like to do something like 'medium-3'. Can I do anything like this with foundation's grid? If so, how?
推荐答案
在 Zurb Foundation 4 中,我使用以下内容向网格列添加了媒体.只需在基础全局变量和网格的 @import 之后添加它即可.
In Zurb Foundation 4 I have added medium to my grid columns with the following. Just add this after the @import of your foundation globals and grid.
@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;
}
}
}
现在您可以像使用小网格和大网格一样使用中.
Now you can use medium like you do the small and large grid.
https://gist.github.com/poeticninja/5985220
这篇关于如何在 Zurb Foundation 4 中使用断点?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!