Question

如何在Bootstrap 4中包含media-breakpoint-up？

如果我尝试了：

@include media-breakpoint-up(sm) {
  html {
    font-size: 16px;
  }
}

然后我有错误：

错误：未定义的mixin'media-breakpoint-up'。在第14行.......

我使用包含文件的Bootstrap 4：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>

Answer 1

你所分享的是SASS，一种扩展CSS功能的CSS预处理器语言。它不是“vanilla” CSS。

@include media-breakpoint-up需要从SASS编译为CSS。这是how to install SASS，因此您可以将SASS转换为CSS。

我个人使用Grunt和grunt-sass package来监视我的SASS文件中的更改，以便在我开发时自动构建CSS。

Answer 2

您必须使用CSS语法

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

Answer 3

如果你正在使用boostrap，我通过将breakpoint.scss文件导入到我需要使用断点函数的scss文件中来实现它。对我来说它是： @import＆＃34; node-modules / bootstrap / aces / mixins / breakpoints.scss

如何在Bootstrap 4中包含media-breakpoint-up？

3 个答案: