基于 Bootstrap 的 Moodle 主题中的媒体查询和页面宽度

Question

我正在使用 LMS Moodle 4 和基于引导程序的主题提升 (github)

默认情况下，页面在所有屏幕上都很窄，我想针对不同的屏幕尺寸使用引导程序方法 (.container)

这是我尝试在原始 scss 字段和自定义 css 字段中使用的内容：

/* Page Width */
@media screen and (max-width: 575px) { $course-content-maxwidth: 100% !default; }
@media screen and (min-width: 576px) and (max-width: 767px) { $course-content-maxwidth: 540px !default; }
@media screen and (min-width: 768px) and (max-width: 991px) { $course-content-maxwidth: 720px !default; }
@media screen and (min-width: 992px) and (max-width: 1199px) { $course-content-maxwidth: 960px !default; }
@media screen and (min-width: 1200px) and (max-width: 1399px) { $course-content-maxwidth: 1140px !default; }
@media screen and (min-width: 1400px) { $course-content-maxwidth: 1320px !default; }

我只用的时候

$course-content-maxwidth: 100% !default;

或

$course-content-maxwidth: 1320px !default;

它确实有效，但不能与上面的媒体查询结合使用。

知道如何让它工作吗？

Answer 1

没关系，我用错了变量。当我使用类时它有效：

/* Page Width */
@media screen and (min-width: 576px) and (max-width: 767px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { max-width: 540px; }}
@media screen and (min-width: 768px) and (max-width: 991px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { max-width: 720px; } }
@media screen and (min-width: 992px) and (max-width: 1199px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { max-width: 960px; } }
@media screen and (min-width: 1200px) and (max-width: 1399px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { max-width: 1140px; } }
@media screen and (min-width: 1400px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { max-width: 1320px; } }