0

モバイル、タブレット、デスクトップの列の動作が異なる追加のブレークポイントを作成したいと思います。
これは私が実現しようとしていることです：

デスクトップ：

<----要素1----><----要素2----><-----サイドバー----->

タブレット：

<----要素1----><-----サイドバー----->
<----要素2---->

モバイル：

<----要素1---->
<----要素2---->
<-----サイドバー----->

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; }
    }
  }
}
4

1 に答える 1

0

この質問は、私が以前に回答した質問と非常によく似ています: zurbfoundation problem order mobile and stacking cause form input to be unclickable

列を順不同で折りたたんでいるため、動作を変更するにはプッシュプル クラスを使用する必要があります。上記の例では sass を使用していませんが、レイアウトを完成させるためにどのクラスを使用または拡張する必要があるかがわかります。

于 2013-02-07T16:12:49.943 に答える