你能在Zurb Foundation 4上设置中等列吗？

Question

注意:这已被问到但在这里没有真正回答:如何在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

在Zurb Foundation 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 2

使用Foundation 4,您需要做的就是包含grid-5 Sass或CSS文件以启用中型网格.

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

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