再コンパイルせずに Bootstrap 4 ブレークポイントをカスタマイズするにはどうすればよいですか?

Bootstrap 4 ブレークポイントをカスタマイズする方法

Bootstrap 4 で xl ブレークポイントを 1200 から 1280 にグローバルに変更したいと考えています。ただし、 Bootstrap の $grid-breakpoints 変数に新しい値を代入しても、xl ブレークポイントは変更されないようです。これを達成するには、Bootstrap を最初から再コンパイルする必要がありますか?

解決策: インポート前に変数を上書きする

Bootstrap 4 ブレークポイントをカスタマイズする鍵は、ブートストラップ ソースをインポートする前に、$grid-breakpoints 変数と $container-max-widths 変数を変更します。 Sass でこれを行う方法は次のとおりです:

<code class="scss">// theme.scss
// Override default Bootstrap variables:
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px
);

// Import Bootstrap sources
@import "~bootstrap/scss/bootstrap";

// Custom CSS rules here...</code>

これで、xl ブレークポイントはグローバルに 1280px に設定され、コンテナーの幅など、ブレークポイントに依存するブートストラップ スタイルはそれに応じて調整されます。

以上が再コンパイルせずに Bootstrap 4 ブレークポイントをカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。