Bootstrap v4 网格大小/Sass 列表

Posted 2023-03-06

【中文标题】Bootstrap v4 网格大小/Sass 列表

【英文标题】：Bootstrap v4 grid sizes / Sass List

【发布时间】：2017-01-25 12:59:26

【问题描述】：

我正在尝试在我的项目中使用 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;

【问题讨论】：

请查阅 SASS 文档。这是语言的基本特征。搜索import。

@Kroltan 你的 rtfm cmets 效率低下，这是一个问答网站，是一个合法的问题。

@Lee 在撰写本文时，我可能没有时间发布完整的答案。在我看来，建议要搜索的内容至少比什么都不说更有成效。

【参考方案1】：

你可以使用$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