Bootstrap自定义断点（Breakpoints）的配置方法-Bootstrap教程-PHP中文网

直接修改 $grid-breakpoints 变量即可生效，但必须在引入 bootstrap sass 前覆盖；还需同步调整 $container-max-widths 和 bootstrapvue 的 breakpoints 配置，cdn 项目无法修改断点。

bootstrap自定义断点（breakpoints）的配置方法

直接改 `$grid-breakpoints` 变量就能生效，但必须在 Bootstrap Sass 引入前覆盖

Bootstrap 4+ 的断点系统由 $grid-breakpoints 这个 Sass map 控制，不是靠一堆独立变量拼出来的。你不能只改 $screen-md-min 就完事——那只是旧版 Bootstrap 3 的写法，新版已废弃。

常见错误现象：改了 $screen-lg 却发现 .col-lg-6 还是在 992px 触发，因为 Bootstrap 已经用 $grid-breakpoints 重写了所有媒体查询逻辑，老变量只留作兼容别名。

正确做法是在自定义 Sass 文件（比如 assets/stylesheets/custom.scss）顶部，先定义新断点 map，再 @import "bootstrap"

示例：

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,  // 改成 1024px 而非默认 992px
  xl: 1440px
);

必须确保这个定义出现在任何 @import "bootstrap/scss/" 之前，否则会被 Bootstrap 默认值覆盖

改断点后，`$container-max-widths` 和 `$grid-gutter-width` 得同步调

断点变了，容器最大宽度不跟着变，会导致布局“撑不开”或“缩太紧”。比如你把 lg 断点提到 1024px，但 $container-max-widths 里 lg 还是 960px，那在 1024–1199px 区间，容器就卡在 960px 不扩展。

使用场景：做面向大屏平板或轻办公设备的后台系统时，常需拉宽断点和容器宽度以适配 1200×800 或 1366×768 分辨率。

VPS Bootstrap

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

下载

$container-max-widths 必须与 $grid-breakpoints 同名 key 对齐，且值合理递增

示例补全：

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 1000px,  // 对应 lg: 1024px
  xl: 1400px
);

$grid-gutter-width 虽然不依赖断点，但若你同时调大了 gutter（比如从 1.5rem 改成 2rem），记得检查所有 .row 内部子元素的 padding 是否溢出容器

BootstrapVue 用户别漏掉 `breakpoints` 全局配置

用了 BootstrapVue？光改 Sass 断点还不够。组件如 <b-col></b-col>、<b-row></b-row> 的响应式行为还受 Vue 插件层控制，它默认读取的是字符串数组 ['xs', 'sm', 'md', 'lg', 'xl']，不会自动感知你 Sass 里新增的 xxl。

常见错误现象：.col-xxl-4 在 HTML 里写了，编译也通过，但页面上没效果——因为 BootstrapVue 根本不认识 xxl 这个 token。

必须显式传入 breakpoints 配置项：

Vue.use(BVConfigPlugin, {
  breakpoints: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
});

如果新增了断点（比如 xxl），Sass 侧也要同步加进 $grid-breakpoints，否则媒体查询不生成，类名无效
注意大小写一致性：Sass 里 key 是 xxl，配置里也得是 'xxl'，不能写成 'XXL' 或 'Xxl'

CDN 引入项目没法改断点，除非自己构建或用 CSS 覆盖

如果你用的是 CDN 直接加载 bootstrap.min.css，那所有断点都已硬编码进 CSS 里，$grid-breakpoints 根本不存在——那是 Sass 编译期的概念，运行时不可修改。

性能 / 兼容性影响：强行用 CSS 媒体查询覆盖（比如重写 @media (min-width: 1024px) 下的 .col-lg-6 宽度）会增加 CSS 体积，且容易被优先级更高的样式干扰；更糟的是，某些工具类（如 flex-lg-row）根本不会响应你的覆盖。

可行方案只有两个：换用 Sass 源码 + 自建构建流程；或接受 CDN 版本的断点限制
临时 workaround（仅限简单场景）：用 @custom-media + PostCSS 插件注入新断点，但需额外构建步骤，且不被所有浏览器原生支持
最容易被忽略的一点：很多团队以为“改了 HTML 里的 class 就行”，比如把 col-md-6 改成 col-xl-6，结果发现小屏下错位——其实是因为没配好 xs/sm 回退规则，断点不是孤立存在的