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;
    }
}

但是失败了，断点错误

@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

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

1 个答案: