Bootstrap 4 の XL ブレークポイントを変更するには?

Bootstrap 4 のブレークポイントのカスタマイズ

Bootstrap 4 では、デフォルトの XL ブレークポイントは 1200px に設定されています。ただし、特定のアプリケーションでは、別のブレークポイントが必要になる場合があります。このガイドでは、ブートストラップのブレークポイントをカスタマイズする方法を説明し、プロジェクトの XL ブレークポイントを 1280 ピクセルに変更するためのソリューションを提供します。

XL ブレークポイントをグローバルに変更するには、$grid-breakpoints と $container-max を変更する必要があります。 Bootstrap の Sass ソース ファイル内の -widths 変数。これを行う方法の例を次に示します。

<code class="scss">$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 source files after modifying variables
@import "~bootstrap/scss/bootstrap";</code>

Bootstrap のソースをインポートする前にこれらの変数を変更することで、デフォルトのブレークポイントをオーバーライドし、アプリケーションでカスタム値を使用できます。この方法を使用すると、ソース ファイルからフレームワークを再コンパイルすることなく、プロジェクトの特定のニーズを満たすようにブートストラップのグリッド システムをカスタマイズできます。

以上がBootstrap 4 の XL ブレークポイントを変更するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。