Bootstrap 4 グリッド システム ブレークポイントをカスタマイズするにはどうすればよいですか?

Bootstrap 4 グリッド システム ブレークポイントのカスタマイズ

この記事では、Bootstrap 4 のデフォルトのグリッド システム ブレークポイントを変更する方法を説明します。これは、xl ブレークポイントを 1200 ピクセルから 1280 ピクセルに変更するなど、アプリケーションでブートストラップのデフォルト設定とは異なる特定のブレークポイント値が必要な場合に便利です。

Bootstrap 4.x および 5.x のソリューション

Bootstrap 4.x または 5.x でグリッド システム ブレークポイントをグローバルにオーバーライドするには、Bootstrap ソース ファイルをインポートする前に $grid-breakpoints 変数と $container-max-widths 変数を変更する必要があります。これを実現する方法を示す scss コードの例を次に示します。

<code class="scss">// File: theme.scss

// Override default BT 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 BT sources
@import "~bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...</code>

これらの変更を行うことで、ソース ファイルからブートストラップを再コンパイルすることなく、アプリケーションの特定の要件を満たすようにブレークポイントをカスタマイズできます。

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