css – Bootstrap v4网格大小/ Sass列表

前端之家收集整理的这篇文章主要介绍了css – Bootstrap v4网格大小/ Sass列表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试在我的项目中使用Bootstrap v4变量,但它存储在一个数组(_variables.scss)中:
$grid-breakpoints: (
  xs: 0,sm: 544px,md: 768px,lg: 992px,xl: 1200px
) !default;

我怎样才能在我的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 demo

Bootstrap 4中还有几个断点混合,可用于定位特定断点……

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

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

media-breakpoint mixin demo

原文链接:https://www.f2er.com/css/216250.html

猜你在找的CSS相关文章