3

注意：这已经被问到但这里没有真正回答：我如何在 Zurb Foundation 4 中使用断点？

Foundation 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>
4

5 回答 5

7

在 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

于 2013-07-12T15:18:41.383 回答
5

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

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

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

于 2013-09-07T04:10:54.717 回答
2

从 4.3 版开始，Foundation 有了一个（实验性的）Medium Grid！您可以在他们的博文 Foundation 4.3: Paving the Road to 5中找到他们的断点和有关如何激活它的详细信息。

于 2013-07-29T13:10:24.637 回答
0

由于 Foundation 已经过渡到版本 5，现在只有一个中等网格，您可以使用medium-12 columnsetc访问它。

于 2014-12-18T14:12:50.107 回答
0 
<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/

我还没有尝试过，但在接下来的几天里我会尝试一下，我会想出更多细节

于 2013-07-11T17:24:15.910 回答