禁用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网格的断点

回答

相关问题