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

I want to create an additional breakpoint with a different behavior for columns for mobile, tablet and dektop.
This is what I'm looking to realize:

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

Desktop:

桌面：

<----ELEMENT 1----><----ELEMENT 2----><-----SIDEBAR----->

<---- ELEMENT 1 ----> <---- ELEMENT 2 ----> <----- SIDEBAR ----->

Tablet:

片剂：

<----ELEMENT 1----><-----SIDEBAR----->
<----ELEMENT 2---->

<---- ELEMENT 1 ----> <----- SIDEBAR -----> <---- ELEMENT 2 ---->

Mobile:

移动：

<----ELEMENT 1---->
<----ELEMENT 2---->
<-----SIDEBAR----->

<---- ELEMENT 1 ----> <---- ELEMENT 2 ----> <----- SIDEBAR ----->

I've tried to use the scss function used to add the mobile-n style and switch from 12 columns to 9 columns in the tablet version, but I think I miss something.

我试过使用用于添加mobile-n样式的scss函数，并在平板电脑版本中从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; }
    }
  }
}

1 个解决方案

#1

This question is very similar to one I've answered before: zurb foundation trouble ordering mobile and stacking causes form input to be unclickable

这个问题与我之前回答的问题非常相似：zurb基金会在订购移动设备和堆叠时遇到问题导致表单输入无法点击

Since you are collapsing the columns out of order you will need to use push-pull classes to alter the behavior. The example (lined above) doesn't use sass, but it will give you an idea of what classes need to be used or extended to complete your layout.

由于您要按顺序折叠列，因此需要使用推拉类来改变行为。示例（上面的内容）不使用sass，但它会让您了解需要使用或扩展哪些类来完成布局。