Как я могу добавить пользовательскую точку останова в 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;
   }
}

Кажется, что это работает для up, я получаю

@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 ширина большей точки останова. Подробнее в документации

Вот 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);
}

Демо