ホームページ > 記事 > ウェブフロントエンド > ブートストラップ 4.x および 5.x グリッド システム ブレークポイントをオーバーライドするにはどうすればよいですか?
Bootstrap 4.x および 5.x グリッド システム ブレークポイントのオーバーライド
Bootstrap の xl ブレークポイントをカスタマイズするには、制御する変数を理解することが重要ですブレークポイントとコンテナの幅。
sass
Sass ビルドでは、$grid-breakpoints と $container-max-widths の 2 つの変数を変更する必要があります。これらの変数は、Bootstrap グリッド システムとコンテナー要素が自動的に再構築されるサイズのしきい値を定義します。
提供された Sass コードでは、1280px ブレークポイントを含めるように $grid-breakpoints が正しく調整されています。ただし、変更を有効にするには、$container-max-widths 変数も変更する必要があります。
作業例
xl ブレークポイントをオーバーライドして 1280px に設定するには、次のようにします。 Sass での実際の例を次に示します。
<code class="scss">// 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...</code>
この例では、Bootstrap のブレークポイントを拡張してカスタム 1280px ブレークポイントを含めることに成功し、同時にコンテナの最大幅もそれに応じて調整しました。
以上がブートストラップ 4.x および 5.x グリッド システム ブレークポイントをオーバーライドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。