使用Sass在Bootstrap中自定义媒体查询

Question

我想将screen-sm变量调整为800px。在导入sass bootstrap之前定义这个变量工作正常，但是当我的屏幕切换到768px时，我有一个768px的断点和媒体查询。

主要scss：

$screen-sm: 800px !default;
$screen-sm-min: $screen-sm !default;
$screen-tablet: $screen-sm-min !default;

@import 'sass-bootstrap/lib/bootstrap';

这是我在768px和800px之间的开发工具中看到的：

@media (min-width: 768px)
.container {
    width: 750px;
}

Bootstrap从哪里获取此最小宽度值以及如何调整它？

Answer 1

尝试删除!default。这里没有必要，因为引导程序已经设置为!default。您将覆盖默认值。

来自SASS文档：

  

如果尚未通过将！default标志添加到值的末尾来分配变量，则可以将其分配给变量。这意味着如果已经为变量赋值，则不会重新赋值，但如果它还没有值，则会给它一个。

Main.scss现在应该是这样的：

$screen-sm: 800px;
$screen-sm-min: $screen-sm;
$screen-tablet: $screen-sm-min;

@import 'sass-bootstrap/lib/bootstrap';