css - ZURB Foundationによる半流体設計？

Question

私はFoundationの初心者ですが、デフォルトのグリッド幅を画面幅の80％だけ大きくし、最小幅を追加する可能性はありますか？

Foundationで不可能な場合、Bootstrapで可能ですか？

Answer 1

Foundation 3の良い点の1つは、SASSで構築されているため、グリッドシステムのCSSが完全に変数に依存していることです。

行の幅は次のようにスタイル設定されscss/foundation/components/_grid.scssます：

/* The Grid ---------------------- */

.row { width: $rowWidth; max-width: 100%; min-width: $screenSmall; margin: 0 auto;
  .row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2)); }

  &.collapse {
    .column, .columns { padding: 0; }
  }
  .row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2));
    &.collapse { margin: 0; }
  }
}

行の合計幅は変数に依存し、$rowWidth変数は次のように定義されscss/foundation/_settings.scssます。

// Grid Settings

$rowWidth: 1000px !default;
$columnGutter: 30px !default;
$totalColumns: 12 !default;
$mobileTotalColumns: 4 !default;
$blockGridElements: 12 !default; // Highest number of block grid elements, Maximum of 24 supported

したがって、変数を必要なサイズに変更する$rowWidth必要があります。

Answer 2

Foundation4を使用して追加しました

.row { max-width: 100%; }

スタイルに。同様rowsに動作しますtop-bar

Answer 3

SASSとバージョン5のFoundationを使用している場合は、次の方法で行をカスタマイズできます。

$row-width: 100%;