Question

我正在推出使用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制作自定义布局？

Answer 1

我认为$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>

禁用Bootstrap 4网格的断点

1 个答案: