Zurb Foundation：更改每个断点的列号

Question

我想为移动设备、平板电脑和桌面设备的列创建一个具有不同行为的附加断点。
这就是我想要实现的：

桌面：

平板电脑：

移动：

我尝试使用 scss 函数添加 mobile-n 样式并在平板电脑版本中从 12 列切换到 9 列，但我想我错过了一些东西。

$tabletTotalColumns: 9;

/* Tablet 4-column Grid */
@for $i from 1 through $tabletTotalColumns {
  .row {
    .tablet-#{convert-number-to-word($i)} { width: gridCalc($i, $tabletTotalColumns) !important; float: $defaultFloat; padding: 0 ($columnGutter/2);
      &:last-child { float: $defaultOpposite; }
      &.end { float: $defaultFloat; }
    }
    &.collapse {
      .tablet-#{convert-number-to-word($i)} { padding: 0; }
    }
  }
}

Answer 1

这个问题和我之前回答过的一个很相似：zurb foundation trouble ordering mobile and stacking causes form input to be unclickable

由于您正在无序折叠列，因此您需要使用推拉类来改变行为。该示例（如上所示）没有使用 sass，但它会让您了解需要使用或扩展哪些类来完成您的布局。