：如何更改断点上的列数？

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主文件中，我使用添加了新的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>

，这很好用。现在我的问题是：，正如你所看到的，我使用了一个“过满”的.row，它以一种将元素重新排列成“两列网格”或“三列网格”的方式浮动它的元素。我觉得这是个肮脏的诡计。

有办法干净地解决我的问题吗？通过.push-#，.pull-#或.offset-#

提前谢谢你！

尼尔斯

Answer 1

我在Zurb基金会文档中进一步找到了回答 one选项卡。