禁用Bootstrap 4网格的断点

时间:2017-05-30 16:42:03

标签: bootstrap-4 twitter-bootstrap-4

我正在推出使用Bootstrap 4 alpha 6作为框架的Web应用程序的前端。

数据量大的应用程序设计用于大约960px或更大的屏幕,因此我想将Bootstrap网格的使用限制为-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制作自定义布局?

1 个答案:

答案 0 :(得分:0)

我认为$grid-breakpoints: (lg: 0px, xl: 1200px) !default;能胜任这项工作。 Bootstrap 4从最低断点删除xs中缀。

对sass变量进行此更改后,最低/默认断点为lg忘记 -lg-。对于每个大于col-**的视口,您的网格类现在1199px对于每个视口最多col-xl-**1200px

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