如何在 Bootstrap 4 中添加自定义断点并将其用于上下？

Question

如何在 Bootstrap 4 中添加自定义变量并将其用作上下断点？

断点是这样使用的

@include media-breakpoint-up(md) {
   // 
}

我可以添加自定义大小（它们需要排序，否则会出错）

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    mycustomvar: 850px,
    lg: 992px,
    xl: 1200px
);

我尝试使用它们

.current-menu-item {
   @include media-breakpoint-up(mycustomvar) {
       font-size: 2222px;
   }
   @include media-breakpoint-down(mycustomvar) {
       font-size: 1111px;
   }
}

这似乎工作正常，我明白了

@media (min-width: 850px) {
    .current-menu-item {
        font-size: 2222px;
    }
}

但是对于down，它会因错误的断点而失败

@media (max-width: 991.98px) {
    .current-menu-item {
        font-size: 11111px;
    }
}

Answer 1

当下面有另一个断点时，Bootstrap 在构造媒体查询时会减去 .02px。否则你会有重叠这样的@media查询......

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 992px) { ... }

记住，任何断点开始在给定的px宽度，所以下一个较小的断点必须小于较大断点的最小px宽度. Read more in the docs

这是 Bootstrap 4 breakpoint-max @function:

@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $next: breakpoint-next($name, $breakpoints);
  @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
}

如果您想继续对自定义断点进行重叠的媒体查询，请覆盖 bootstrap-max 函数（删除 .02px 减法）...

@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $next: breakpoint-next($name, $breakpoints);
  @return if($next, breakpoint-min($next, $breakpoints), null);
}

Demo