如何在 bootstrap 4 中添加自定义断点以及如何在 scss 中使用响应式断点 mixin

Question

我正在开发一个 Angular 5 应用程序，它需要是一个响应式应用程序。 在字体大小不同的1366X768 和1920X1080 分辨率下，我遇到了问题。

问题 1： 我在 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
);

我添加了xxl 作为新断点。现在，当我将col-xxl-* 类添加到我的任何元素时，该元素会像col-12 那样采用全宽jusy。 参考下图：

对于有红色边框的容器，我给了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

通过bootstrap responsive breakpoints，我们可以使用 mixins 来定位不同的分辨率。因此，在组件级 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;
        }
    }

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

Answer 1

您可以像这样添加一个新的xxl 断点。确保你@import bootstrap 在设置自定义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";

演示：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;
    }
}

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