Question

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

桌面：

＆lt; ---- ELEMENT 1 ----＆gt;＆lt; ---- ELEMENT 2 ----＆gt;＆lt; ----- SIDEBAR -----＆gt;

平板电脑：

＆lt; ---- ELEMENT 1 ----＆gt;＆lt; ----- SIDEBAR -----＆gt;
＆lt; ---- ELEMENT 2 ----＆gt;

移动：

＆lt; ---- ELEMENT 1 ----＆gt;
＆lt; ---- ELEMENT 2 ----＆gt;
＆LT; ----- ----- SIDEBAR GT＆;

我尝试使用用于添加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; }
    }
  }
}

Answer 1

这个问题与我之前回答的问题非常相似：zurb foundation trouble ordering mobile and stacking causes form input to be unclickable

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

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

1 个答案: