Question

我从Bootstrap 3切换到Bootstrap 4.我正在使用sass源代码，我在运行时编译。当我更改库时，我开始在我的媒体交换机上出错，即

@media screen and (min-width: $screen-md-min) {
    padding: 40px 50px;
}

我收到错误 未定义的变量：＆＃34; $ screen-md-min＆＃34;。

访问Bootstrap4变量的正确方法是什么？

谢谢你。

Answer 1

对于Bootstrap 4，您可以通过在.scss文件中导入bootstrap / _variables.scss来使用它：

.your-class-name {
  color: black;

  @media (min-width: map_get($grid-breakpoints, sm)) {
    color: red;
  }

  @media (min-width: map_get($grid-breakpoints, md)) {
    color: blue;
  }

  @media (min-width: map_get($grid-breakpoints, lg)) {
    color: green;
  }

  @media (min-width: map_get($grid-breakpoints, xl)) {
    color: yellow;
  }
}

或者这个：

.your-class-name {
  color: black;

  @include media-breakpoint-up(sm) {
    color: red;
  }

  @include media-breakpoint-up(md) {
    color: blue;
  }

  @include media-breakpoint-up(lg) {
    color: green;
  }

  @include media-breakpoint-up(xl) {
    color: yellow;
  }
}

有关更多详细信息，请查看this页面的响应断点。

Answer 2

BS4用Sass取代Less。较少使用延迟加载变量而Sass没有。所以你应该在使用它们之前声明你的变量。确保在媒体切换之前导入bootstrap/_variables.scss：

@import 'bootstrap/variables';
@media screen and (min-width: $screen-md-min) {
    padding: 40px 50px;
}

Answer 3

在Bootstrap 4中，我可以通过执行以下操作来获取screen-md-min值：

$grid-breakpoint-sm: map_get($grid-breakpoints, "sm");

我是从引导程序的_variables.scss文件中找到的：

$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;

Bootstrap4：访问变量？

3 个答案: