Question

我想构建一个行为如此的标记：

肖像

<element-1><element-2>
<element-3><element-4>
<element-5><element-6>

风景

<element-1><element-2><element-3>
<element-4><element-5><element-6>

在我的SASS主文件中，我使用Zurb Foundation mixins添加了新的html类：

// Foundation
@import "../bower_components/foundation/scss/foundation/components/grid";

// new grid classes
$small-only-and-landscape: "#{$screen} and (max-width: #{upper-bound($small-range)}) and (orientation: landscape)";
$small-only-and-portrait: "#{$screen} and (max-width: #{upper-bound($small-range)}) and (orientation: portrait)";

@media #{$small-only-and-landscape} {
    @include grid-html-classes($size:small-landscape);
}

@media #{$small-only-and-portrait} {
    @include grid-html-classes($size:small-portrait);
}

在我的index.html的某处，有类似的东西：

<div class="row">
    <div class="small-landscape-4 small-portrait-6 columns">
        <a href="pictures.html">Bilder</a>
    </div>
    <div class="small-landscape-4 small-portrait-6 columns">
        <a href="#">Freunde</a>
    </div>
    <div class="small-landscape-4 small-portrait-6 columns">
        <a href="#">Videos</a>
    </div>
    <div class="small-landscape-4 small-portrait-6 columns">
        <a href="#">Basteln</a>
    </div>
    <div class="small-landscape-4 small-portrait-6 columns">
        <a href="#">Spiele</a>
    </div>
    <div class="small-landscape-4 small-portrait-6 columns">
        <a href="#">Audio</a>
    </div>
</div>

这很好用。现在我的问题是： 正如你所看到的，我正在使用＆＃34; overfull＆＃34; .row，将其元素浮动，重新排列为＆＃34;双列网格＆＃34;或者是一个＆＃34;三列网格＆＃34;。我觉得，这是一个肮脏的把戏。

有没有办法以干净的方式解决我的问题？通过.push-#，.pull-#或.offset-#？

提前非常感谢你！

尼尔斯

Answer 1

我在Zurb基础文档上找到了answer一个标签。

Zurb Foundation：如何在断点处更改列数？

1 个答案: