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

Question

我正在开发一个角度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相关的resonsive网格类未被应用。 我认为它应该生成如下的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中我使用了以下mixins：

@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中添加了自定义网格断点。 我在这里错过了什么吗？

Answer 1

您可以像这样添加新的xxl断点。 设置自定义grid-breakpoints之后确保@import引导 ...

@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具有预期的红色边框。