css - zurb Foundation で行幅を増やすにはどうすればよいですか?

Question

私はZurbの基礎を学んでいます.私の質問は、フレームワークの行のデフォルト幅をどのように増やすことができるかということです.

960 グリッド システムのように 960 ピクセルです。行のウィッシュをおそらく 1200px に増やすにはどうすればよいので、カスタム スタイルシートを追加する必要がありますか?

Answer 1

を使用する必要はありません!important。新しい CSS を の下に配置して、次のようにapp.css記述しfoundation.cssます。

.row {
    max-width: .px;
}

デフォルトの行と競合しないように、別のクラスを使用してこのプロパティを追加することもできます。

Answer 2

より良い方法は、プロジェクトの Foundation の_settings.scssファイルに移動することです。_settings.css ファイルがない場合、またはその場所がわからない場合は、オンラインで確認してください。開いてこれを見つけてください

$row-width: rem-calc(980); //change up to what you want

この上限値は、以下の値、つまり 61.25rem のような行幅を生成します。

/* line 228, ../../bower_components/foundation/scss/foundation/components/_grid.scss */
.row {
  margin: 0 auto;
  max-width: 61.25rem;
  width: 100%;
}

しかし、次の例のように、行幅を 980 から 1280 などに変更すると、

$row-width: rem-calc(1280);

次に、私のcssが新しいmax-widthで自動的に生成されることを以下に示します

/* line 228, ../../bower_components/foundation/scss/foundation/components/_grid.scss */
.row {
  margin: 0 auto;
  max-width: 80rem;
  width: 100%;
}

Web サイト全体の外観とレイアウトを大幅に変更できるため、その設定には注意してください。

Answer 3

Foundation 6 では.expanded、幅を流動的にするクラスが導入されています: http://foundation.zurb.com/sites/docs/grid.html#fluid-row

それでもパディングに問題が発生しますが、これを修正する方法はわかりません。