ホームページ > ウェブフロントエンド > CSSチュートリアル > 再コンパイルせずに Bootstrap 4 ブレークポイントをカスタマイズするにはどうすればよいですか?

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

Susan Sarandon
リリース: 2024-11-03 06:36:30
オリジナル
947 人が閲覧しました

How to Customize Bootstrap 4 Breakpoints Without Recompiling?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート