如何在Bootstrap 4中修改网格断点的CSS媒体查询-css教程-PHP中文网

必须修改 sass 变量并重新编译才能改变 bootstrap 4 断点——直接写 css 媒体查询无效，因 .col-lg-6 等类由 $grid-breakpoints 编译时静态生成；需先导入 functions，再重定义 $grid-breakpoints 和 $container-max-widths，最后导入 bootstrap。

如何在bootstrap 4中修改网格断点的css媒体查询

不能直接改 CSS 媒体查询来修改 Bootstrap 4 的网格断点行为——.col-lg-6 这类类名是 Sass 编译时静态生成的，不读你手写的 @media 规则。

为什么直接加 `@media (min-width: 1024px)` 没用

你写了 @media (min-width: 1024px) { .my-col { flex: 0 0 50%; } }，但 .col-lg-6 依然在 992px 生效。这不是 bug，是设计逻辑：Bootstrap 4 的栅格类全部由 $grid-breakpoints 这个 Sass map 驱动，编译后就固化了，CSS 层面无法动态覆盖或“注入”新断点。

常见错误现象包括：.col-custom-6 根本不存在、自己写的媒体查询被原生类覆盖（因选择器权重低或加载顺序靠后）、d-xl-none 在预期宽度没生效。

Bootstrap 4 不支持运行时断点切换，所有响应式类都在构建时确定
CDN 引入的 CSS 文件里，断点阈值已硬编码，无法通过外部 CSS 覆盖
即使你用 !important 强行覆盖某条样式，.col-lg-6 的行为仍按 992px 切换，语义和实际表现会脱节

`$grid-breakpoints` 必须在 `@import "bootstrap/scss/variables"` 前重定义

想让 .col-lg-6 真正在 1024px 生效，唯一可靠方式是修改 Sass 源码，并用构建工具重新编译。关键顺序不能错：

先 @import "bootstrap/scss/functions"（否则 map-get 等函数不可用）
再 @import "bootstrap/scss/variables"

紧接着重写 $grid-breakpoints，例如：

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px, // 原为 992px
  xl: 1440px
);

最后 @import "bootstrap/scss/bootstrap"

漏掉 functions，Sass 编译报错；写在 variables 后面，等于没写——变量已被默认值锁定。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

`$container-max-widths` 必须同步更新，否则容器卡住

只改 $grid-breakpoints 里的 lg 为 1024px，却不改 $container-max-widths，会导致 .container 在 1024–1199px 区间死守旧宽度（如 960px），左右大片留白。

$container-max-widths 的键必须与 $grid-breakpoints 完全一致（大小写、引号、顺序），值建议略小于下一个断点：

若 lg: 1024px，则 $container-max-widths: (lg: 960px) 可能不够，应设为 1000px 左右
xl 对应的容器宽度应略小于下一个断点（如果没定义 xxl，则参考 1440px → 设为 ~1400px）
xs 不需要在 $container-max-widths 中声明，它默认 100%

没有构建流程？用原生类组合代替自定义断点

如果你只能用 CDN 或无法重编译 Sass（比如纯 HTML + 外链 CSS），就别试图“造” .col-xxl-6，而是用现有类显式控制：

要「仅在 ≥1024px 显示」：用 d-none d-lg-block d-xl-block（注意：Bootstrap 4 没 xxl，xl 就是最大断点）
要「在 1024–1199px 专属样式」：手写 @media (min-width: 1024px) and (max-width: 1199.98px)，但必须显式写 and (max-width: ...)，因为 Bootstrap 自身不用区间逻辑
避免混用 max-width 和 min-width 查询，否则易与原生类冲突；统一走 min-width 递进路线更安全