禁用 Bootstrap 4 网格的断点

Question

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

数据量大的应用程序设计用于在大约 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进行自定义布局？

Answer 1

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

在对 sass 变量进行此更改后，最低/默认断点为 lg。 忘记 -lg-。对于每个视口，您的网格类现在为 col-**，最大为 1199px，对于大于 1200px 的每个视口，您的网格类为 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>