禁用Bootstrap 4網格的斷點

我正在推出使用Bootstrap 4 alpha 6作爲框架的Web應用程序的前端。禁用Bootstrap 4網格的斷點

的數據密集型應用程序的目的是從960像素〜寬或更大的屏幕上工作，所以我想將引導網格的使用率限制爲-lg-和-xl-網格-lg-是最小/默認斷點。

從地圖卸下下斷點像這樣不防止網格類-xs-，-sm-和-md-的產生，但它也同樣確實爲-lg-使一切捕捉到一個100％的寬度的列。

$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使自定義佈局？

來源

2017-05-30 Steph

我認爲$grid-breakpoints: (lg: 0px, xl: 1200px) !default;可以完成這項工作。 Bootstrap 4從最低的斷點中刪除了xs中綴。

對sass變量進行此更改後，最低/默認斷點爲lg。忘記-lg-。對於大於1200px的每個視口，您的網格類別現在爲每個視口col-**，最高爲1199px和col-xl-**。

<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>

來源

2017-05-30 17:39:12 tmg

感謝您解決了我在新的'col-x'類中出現的一些困惑以及如何操作。這一切都有效，但唯一的問題是'.container'寬度（設置爲960像素）出於某種原因被忽略，佈局只是繼續縮小。 – Steph

禁用Bootstrap 4網格的斷點

回答

相關問題