采用 media-breakpoint-between($lower, $upper)

依存关系

mixins在中声明mixins/_breakpoints.scss，并取决于在中找到的$ grid-breakpoints映射_variables.scss。

例

断点图：

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

混合：

@include media-breakpoint-between(sm, md) {
    // your code
}

编译为

@media (min-width: 576px) and (max-width: 991px) {}

重要通知

混合之间的媒体断点之间使用声明的断点的“较低”和“较高”值。

• 断点的“较低”值是$ grid-breakpoint映射中的声明值。

• 特定断点的“较高”值等于较高断点的值减去1px。

上和下断点值示例（基于od $ grid-breakpoint map）

Lower value of md is equal to 576
Upper value of md is equal to 991 ( value of next breakpoint (lg) minus 1px (992px-1px)

其他媒体混合

@include media-breakpoint-up(sm) {}创建一个最小宽度为的断点$sm。

@include media-breakpoint-down(md) {}创建最大宽度为的断点$md。

这也是mixin media-breakpoint-between($lower, $upper)

所以这应该工作

@include media-breakpoint-between(sm, md){
  // this applies only between the sm and ms breakpoints 
}