Bootstrap v4 网格大小/Sass 列表 [英] Bootstrap v4 grid sizes / Sass List
本文介绍了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;
如何在我的 sass 中引用它:
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;
}
}
Bootstrap 4 中还有几个断点 mixin 可以用来定位特定的断点...
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){
...
}
这篇关于Bootstrap v4 网格大小/Sass 列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文