Foundation-framework 中的小国没有权利浮动

Question

我的 Zurb Foundation-based 布局中有一个 <p class="right">。但我不希望它在小屏幕上直接浮动。 Foundation 中是否有内置解决方案？还是我必须为其创建自己的 class？
提前致谢！

Answer 1

不，没有。根据 this，您必须创建自己的 class（或 classes）。

@medium-up 屏幕一个 class

SCSS

.medium-right {
   @media #{$medium-up} {
      float: right !important;
   }
}

已编译 CSS（含 default Foundation breakpoints）

@media only screen and (min-width: 40.063em) {
   .medium-right {
      float: right !important;
   }
}

HTML（用法）

<p class="medium-right">

Class 每个屏幕尺寸

如果你想为每个屏幕尺寸生成正确的 classes，你可以使用这样的东西：

SCSS

@for $i from 1 through length($align-class-names) {
   @media #{(nth($align-class-breakpoints, $i))} {
      .#{(nth($align-class-names, $i))}-right   { float: right !important; }
   }
}

已编译 CSS（含 default Foundation breakpoints）

@media only screen and (max-width: 40em) {
  .small-only-right {
    float: right !important;
  }
}

@media only screen {
  .small-right {
    float: right !important;
  }
}

@media only screen and (min-width: 40.0625em) and (max-width: 64em) {
  .medium-only-right {
    float: right !important;
  }
}

@media only screen and (min-width: 40.0625em) {
  .medium-right {
    float: right !important;
  }
}

@media only screen and (min-width: 64.0625em) and (max-width: 90em) {
  .large-only-right {
    float: right !important;
  }
}

@media only screen and (min-width: 64.0625em) {
  .large-right {
    float: right !important;
  }
}

@media only screen and (min-width: 90.0625em) and (max-width: 120em) {
  .xlarge-only-right {
    float: right !important;
  }
}

@media only screen and (min-width: 90.0625em) {
  .xlarge-right {
    float: right !important;
  }
}

@media only screen and (min-width: 120.0625em) and (max-width: 6249999.9375em) {
  .xxlarge-only-right {
    float: right !important;
  }
}

@media only screen and (min-width: 120.0625em) {
  .xxlarge-right {
    float: right !important;
  }
}

Answer 2

我使用未编译 SCSS 的 Foundation 作为我的工具链的一部分。

对于这种情况，我已通过向我的应用程序 Javascript 添加一些简单的逻辑来解决此问题，该逻辑包含在每个页面中：

app_stuff = {
    resize_handler: function (event) {
        if (window.matchMedia(Foundation.media_queries['small']).matches)
        {
            $(".medium-up-text-right").removeClass("text-right");
        }
        else
        {
            $(".medium-up-text-right").addClass("text-right");
        };
    }
}

:

$(window).resize(Foundation.utils.throttle(app_stuff.resize_handler, 10));

（这是我实际代码的编辑版本，未经测试。完整代码位于 https://github.com/gklyne/annalist/blob/master/src/annalist_root/annalist/data/static/js/annalist.js, and the corresponding Django master page template is at https://github.com/gklyne/annalist/blob/master/src/annalist_root/annalist/templates/base_generic.html - 相关包含在模板末尾。）

Foundation-framework 中的小国没有权利浮动

No right floating for small-state in Foundation-framework

css

css-float

zurb-foundation

@medium-up 屏幕一个 class

Class 每个屏幕尺寸