您可以在Zurb Foundation 4上設置中等欄目嗎？

Question

注意：這已被要求，但沒有真正回答這裏：How do I make use of breakpoints in Zurb foundation 4?

的小和大對基金會4列是非常方便的，但小比我激活或許早一點像 - 是否有任何設置中等列設置爲小而不是微小的分辨率，例如800 * 600？

在我的特定情況下，我想以下設置：

<div class="small-12 medium-6 large-4 columns">First column</div> 
<div class="small-12 medium-6 large-8 columns">Second column</div> 

Answer 1

自成立以來已過渡到5.0版本，現在只是一箇中等網格，您可以訪問使用medium-12 columns等

Answer 2

<div class='row'> 
    <div id='foo' class='large-4 medium-6 small-12 columns'>   
    </div> 
</div> 

SCSS

@mixin respond-to($media) { 
    @if $media == small-mode { 
    @media only screen and (max-width: 420px) { @content } 
    } 
    @else if $media == medium-mode { 
    @media only screen and (max-width: 768px) { @content } 
    } 
    @else if $media == large-mode { 
    @media only screen and (max-width: 980px) { @content } 
    } 
    } 
} 

http://adioso.com/blog/

我沒有嘗試過，但在接下來的幾天，我會嘗試它，我會想出更多的細節

Answer 3

在Zurb基金會4中，我添加了以下內容到我的網格列。只需在基礎的全局變量和網格的@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

Answer 4

自從4.3版本，基金會擁有的（實驗）中電網！您可以在他們的博客文章Foundation 4.3: Paving the Road to 5中找到他們的斷點和詳細信息。

Answer 5

在Foundation 4中，您只需包含grid-5 Sass或CSS文件即可啓用中等網格。

@import "foundation/components/grid-5"; 

http://foundation.zurb.com/docs/components/grid.html#medium-grid