使用Sass在Bootstrap中自定義媒體查詢

Question

我想將我的screen-sm變量調整爲800px。在導入sass引導之前定義這個變量工作正常，但仍然當我的屏幕切換到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和800像素之間：

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

哪裏引導採取從這個最小寬度值和如何調整它？

Answer 1

嘗試刪除!default。這裏沒有必要，因爲引導程序已經設置爲!default。您正在覆蓋默認值。

從SASS文件：

您可以分配到變量，如果它們尚未加入默認的標誌值的分配結束！這意味着如果變量已經被賦值，它將不會被重新賦值，但是如果它還沒有賦值，它將會被賦值。

Main.scss現在應該是這樣的：

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

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