ブートストラップ 4.x および 5.x グリッド システム ブレークポイントのオーバーライド

ブートストラップの xl ブレークポイントをカスタマイズするには、制御する変数を理解することが重要ですブレークポイントとコンテナwidths.

sass
Sass ビルドでは、$grid-breakpoints と $container-max-widths の 2 つの変数を変更する必要があります。これらの変数は、Bootstrap グリッド システムとコンテナー要素が自動的に再構築されるサイズのしきい値を定義します。

提供された Sass コードでは、1280px ブレークポイントを含めるように $grid-breakpoints が正しく調整されています。ただし、変更を有効にするには、$container-max-widths 変数も変更する必要があります。

作業例
xl ブレークポイントをオーバーライドして 1280px に設定するには、次のようにします。 Sass での実際の例は次のとおりです:

// theme.scss
// Override default BT variables
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px, // Custom xl breakpoint
  xxl: 1900px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px, // Custom max-width for xl breakpoint
  xxl: 1610px
);

// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...

この例では、ブートストラップのブレークポイントを拡張してカスタム 1280px ブレークポイントを含めることに成功し、同時にコンテナの最大幅もそれに応じて調整しました。