如何在Bootstrap 4中添加自定义断点并将其用于上下? [英] How can I add custom breakpoint in Bootstrap 4 and use it for both up and down?

问题描述

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

How can I add custom variable in Bootstrap 4 and use it as a breakpoint for both up and down?

断点是这样使用的

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

我可以添加自定义尺寸(需要排序，否则会出错)

I can add custom size (they need to be sorted otherwise it is error)

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

这似乎可以解决问题，我明白了

This seems to be working for up, I get

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

但是失败了，它会以错误的断点失败

But for down it fails with wrong breakpoint

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

推荐答案

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

When there is another breakpoint below, Bootstrap subtracts .02px when constructing the media query. Otherwise you'd have overlapping @media queries like this...

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

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

请记住，任何断点都以给定的px宽度开始，因此下一个向下的较小断点必须小于大于较大断点的最小px宽度. 在文档中了解更多

Remember, any breakpoint starts at the given px width, so the next down smaller breakpoint must be less than the min px width of the larger breakpoint. Read more in the docs

这是Bootstrap 4 breakpoint-max @function:

Here's the 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减法)...

If you want to go ahead an have overlapping media queries for the custom breakpoint, override the bootstrap-max function (removing the .02px subtraction)...

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

演示

这篇关于如何在Bootstrap 4中添加自定义断点并将其用于上下?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！