时间戳

首页 > 解决方案 > 使用断点创建新的引导类

css - 使用断点创建新的引导类

问题描述

我正在尝试使用 bootstrap 4 断点创建一堆新类，并且我想使用 sass 来生成它们，但我有点不确定到底该怎么做。

基本上课程是这样的：

@media (max-width: 767px) {
    .bg-md-img {
        background-image: none !important;
    }
}

但显然对于每个断点。我知道media-breakpoint-down我可以以某种方式使用 mixin，但我不太确定如何正确循环断点。

标签： csssassbootstrap-4

解决方案

看看 Bootstrap 网格列是如何为make-grid-columnsmixin in中的每个断点制作的grid_framework.scss。

你会做类似的事情......

// loop through each breakpoint
@each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    .bg#{$infix}-img {
      ..
    }
}


// css for one breakpoint
// change style on sm only
@include media-breakpoint-between(sm, md){
  .bg-sm-img {
      ...
  }
}

演示：https ://www.codeply.com/go/Zjk1ybVJHZ

推荐阅读