如何在 bootstrap4 中添加自定义断点以及如何在 scss 中使用响应式断点混合

我正在开发一个 Angular 5 应用程序，它需要是一个响应式应用程序。 我面临着使其响应的问题1366X768 and 1920X1080字体大小不同的分辨率。

问题一：我在 style.scss 中覆盖了断点，如下所示：

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl:1900px //this is custom breakpoint; after compiling bootstrap does generates col-xxl-* classes
);

I have added xxl as new breakpoint. Now when I add col-xxl-* class to any of my element, that element takes full width jusy like what col-12 does. Refer image below :

对于有红色边框的容器，我给出了col-xxl-3班级;但它仍然具有全宽。为什么它与响应式网格类相关col-*-3没有得到应用。 我认为它应该生成如下所示的CSS：

.col-xxl-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
} 

但事实并非如此。难道我做错了什么 ？

问题2

由此引导响应断点 https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints，我们可以使用 mixin 来针对不同的分辨率。因此，在组件级别的 scss 中，我使用了这些 mixin，如下所示：

@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/_mixins.scss';

span.work_catalog {
    @include media-breakpoint-up(xl) { //this will target all above 1200 px as per bootstrap documentation; so this works as u see red border in above image
       border:1px solid red;
    }
}

但是当我像下面这样使用它时：

 span.work_catalog {
        @include media-breakpoint-up(xxl) { 
           border:1px solid red;
        }
    }

这仍然适用于分辨率超过 1200px 的情况； 我假设上面的 css 应该只应用于 1900px 以上，因为我在 style.scss 中添加了自定义网格断点。 我在这里错过了什么吗？

您可以添加一个新的xxl像这样的断点。确保你 @import bootstrapafter设置自定义grid-breakpoints...

@import "bootstrap/functions";
@import "bootstrap/variables";

$grid-breakpoints: (
  xs: 0,
  sm: 567px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1900px
);

$container-max-widths: (
  sm: 567px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1900px
);

 @import "bootstrap";

Demo: https://www.codeply.com/go/jus43PxWAU https://www.codeply.com/go/jus43PxWAU

然后适当的xxl-*将生成类...

@media (min-width: 1900px) {
    .col-xxl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

对于自定义 mixin 类，请在 @import bootstrap 之后定义它们...

@import "bootstrap";

span.work_catalog {
    @include media-breakpoint-up(xxl) { 
       border:1px solid red;
    }
}

Demo: https://www.codeply.com/go/jus43PxWAU https://www.codeply.com/go/jus43PxWAU（注意演示将xxl断点设置为1366px）所以当屏幕比xxl宽时，.work_catalog有预期的红色边框。