Bootstrap v4网格大小/Sass列表

问题描述

我正在尝试在项目中使用Bootstrap v4变量，但该变量存储在数组(_variables.scss)中:

I'm trying to use Bootstrap v4 variables in my project, but it is stored inside an array (_variables.scss):

$grid-breakpoints: (
  xs: 0,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

我该如何在我的混蛋中引用它:

How can I refer to it in my sass:

@media(max-width: $grid-breakpoints[xs]) {
  font-size: 20px;
}

推荐答案

您可以使用$map-get ..

@media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, sm)){
  [class*='col-'] {
    font-size: 20px;
   }
}

$ grid-breakpoints演示

$grid-breakpoints demo

Bootstrap 4中还有几个断点混合器，可用于定位特定的断点...

There are also several breakpoint mixins in Bootstrap 4 that can be used to target a specific breakpoint...

@include media-breakpoint-between(sm, md){
  ...
}

@include media-breakpoint-only(lg){
  ...
}

媒体断点混合演示

media-breakpoint mixin demo

这篇关于Bootstrap v4网格大小/Sass列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！