Moodle 4 Boost主题：Bootstrap媒体查询适配页面宽度问题求助

你的问题出在SCSS变量不能在媒体查询中赋值——SCSS变量是预编译阶段处理的，编译后就会被替换成固定值，而媒体查询是浏览器运行时才生效的规则，所以你写在@media里的变量赋值根本不会影响最终生成的CSS，自然没有效果。单独设置变量有效是因为编译时直接替换了变量值，没有涉及媒体查询的逻辑。

下面是两种可行的解决方法：

方法一：直接用自定义CSS（最简单） #

在Moodle的「自定义CSS」字段中添加以下代码，直接覆盖页面容器的最大宽度：

/* 适配Bootstrap响应式容器尺寸 */
@media screen and (max-width: 575px) {
    .page-container {
        max-width: 100% !important;
    }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
    .page-container {
        max-width: 540px !important;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .page-container {
        max-width: 720px !important;
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .page-container {
        max-width: 960px !important;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1399px) {
    .page-container {
        max-width: 1140px !important;
    }
}
@media screen and (min-width: 1400px) {
    .page-container {
        max-width: 1320px !important;
    }
}

如果.page-container不生效，可以通过浏览器开发者工具查看页面内容容器的实际类名（比如.region-main或.course-content），替换上面的类名即可。

方法二：用SCSS的正确写法（适合原始SCSS字段） #

如果要在原始SCSS字段中编写，可以借助Bootstrap的断点变量（或手动定义）来生成响应式规则，避免重复代码：

// 手动定义Bootstrap断点（如果主题未加载）
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
);

// 对应Bootstrap容器的最大宽度
$container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px,
    xxl: 1320px
);

// 给页面容器设置响应式宽度
.page-container {
    max-width: 100%;
    @each $breakpoint, $width in $container-max-widths {
        @media screen and (min-width: map-get($grid-breakpoints, $breakpoint)) {
            max-width: $width;
        }
    }
}

这种写法利用SCSS的循环功能自动生成媒体查询，比手动写每个断点更简洁。

内容的提问来源于stack exchange，提问作者user363808