2

4 つの異なるブレークポイントで正しい列幅を取得して、必要に応じて設定しようとすると問題が発生します。

span-columns(3, 12) を使用している場合、最大サイズでの合計幅が 300px で、各コンテンツ間に 20px のパディングが必要です。各列の幅を設定するために数学的に解決しようとしましたが、期待どおりに機能していません。

私のコードの一部は次のとおりです。

$total-columns: 12;
$column-width: 86.666667px;
$gutter-width: 20px;
$grid-padding: 20px;
$container-width: 1300px;
$container-syle: static;

(3, 12) を使用すると、私のコンテンツ ブロックは 295px の幅で表示されます。合計300pxにするにはどうすればよいですか？

4

1 に答える 1

1

列幅に基づいて計算したい場合は、$container-widthオーバーライドを削除する必要があります。次に、数学は非常に簡単です。

3 * $column-width + 2 * $gutter-width = 300px

この方程式には、必要なガターのサイズに応じて、多くの解が考えられます。明らかに、あなたはすでにそれを行っています:

3 * 86.666666667px + 2 * 20 ~= 300px

また...

3 * 90px + 2 * 15px = 300px

など。現在のセットアップの唯一の問題は、独自の$container-width.

于 2013-10-25T15:36:22.303 に答える