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

Question

デスクトップからタブレット、または xl から lg まで、それぞれ 1280 個のブレークポイントを必要とするデザインのアプリケーションがあります。ただし、Bootstrap 自体には 1200 に xl ブレークポイントがあります。

ブートのために xl ブレークポイントをグローバルに変更する必要があります。 Bootstrap 4 をソースから再コンパイルする必要がありますか?

Sass ビルドでこれを設定してみました:

リーリー

ただし、グローバル xl ブレークポイントには変更はなく、幅 1200 ピクセルでブレークします。

Answer 1

$grid-breakpoints 変数を変更すると、正常に動作します。 custom.scss の /bootstrap または bootstrap/variables を @import ブートストラップの後にインポートする必要があることに注意してください。

＃＃＃例えば：＃＃＃ リーリー

デモ:

https://codeply.com/go/MlIRhbJYGj

参照:

SASS を拡張/使用してブートストラップ 4 を変更 (カスタマイズ) する方法

Answer 2

ブートストラップ 4.x および 5.x

ブートストラップ ソースをインポートする前に、$grid-breakpoints 変数と $container-max-widths 変数をオーバーライドする必要があります。これは実際の例です (scss):

リーリー