ブートストラップ4グリッドのブレークポイントを無効にする

Question

フレームワークとしてブートストラップ4アルファ6を使用しているウェブアプリケーションのフロントエンドを展開しています。

は、データ・重いアプリは〜960ピクセル幅の広い以上から画面上で動作するように設計されたので、私は-lg-にブートストラップグリッドのuseageを制限したいと-xl-グリッドは-lg-が最小/デフォルトされた状態でブレークされます。このように生成されること-xs-、-sm-と-md-ためグリッドクラスを防ぐんが、それはまた、単一の100％の幅の列にスナップためにすべてを引き起こす-lg-ため、同様にしよう

マップから低いブレークポイントを削除します。

$grid-breakpoints: (

    lg: 0px, // originally 992px 
    xl: 1200px 
) !default; 
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); 
@include _assert-starts-at-zero($grid-breakpoints); 

私が探しているものを達成するために必要なメディアクエリを編集する方法もありません。

誰でもこれを試したことがありますか、それを行う方法についてのアイディアがありますか？

$enable-grid-classes: false !default;

...とmixins providedを使用してカスタムレイアウトを作る：私の他の理論を設定するのですか？

Answer 1

私は仕事が$grid-breakpoints: (lg: 0px, xl: 1200px) !default;だと思います。 ブートストラップ4は、最も低いブレークポイントからxsを削除しました。

このsass変数の変更後、最も低い/デフォルトのブレークポイントはlgです。 忘れました-lg-。あなたのグリッドクラスはより大きいすべてのビューポートに対して1199pxおよびcol-xl-**までの各ビューポートに対してcol-**になりました。

<div class="row"> 
    <div class="col-6 col-xl-3 text-center" style="background-color: red;"> 
     50% - 25% 
    </div> 
    <div class="col-6 col-xl-9 text-center" style="background-color: green;"> 
     50% - 75% 
    </div> 
</div>