Bootstrap 5 栅格系统 breakpoint 数值自定义-Bootstrap教程-PHP中文网

必须在 @import "bootstrap" 之前定义 $grid-breakpoints 等变量，且需同步更新 $container-max-widths、$grid-columns 等关联变量，并确保键名一致、顺序合理，否则响应式类和组件行为将错位。

bootstrap 5 栅格系统 breakpoint 数值自定义

改断点必须在 `@import "bootstrap"` 之前定义变量

Bootstrap 5 的 $grid-breakpoints 是编译时静态生成类名的依据，不是运行时可覆盖的 CSS 媒体查询。你如果在 @import 之后写 $grid-breakpoints: (...);，它会被默认值覆盖，所有 .col-lg-6、.d-xl-block 这类工具类仍按原始断点（如 lg: 992px）生成，导致行为错位。

正确顺序只能是：

在自定义 Sass 入口文件（如 custom.scss）顶部先声明 $grid-breakpoints
再 @import "bootstrap/scss/functions";（可选，但推荐）
再 @import "bootstrap/scss/variables";（确保变量被重载）
最后 @import "bootstrap/scss/bootstrap";

漏掉任意一步，尤其是把 @import "bootstrap" 放在变量定义前，就等于没改。

`$grid-breakpoints` 和 `$container-max-widths` 必须 key 对齐且同步更新

只改 $grid-breakpoints 而不碰 $container-max-widths，会导致 .container 在新断点区间“卡住不动”。比如你把 lg 从 992px 改成 1024px，但 $container-max-widths 里 lg 还是 960px，那在 1024px–1199px 区间，容器宽度就停在 960px，内容被硬生生挤窄。

必须同时更新两者，且 key 名严格一致：

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,  // ← 改了这里
  xl: 1440px,
  xxl: 1920px
);

$container-max-widths: (
  xs: 100%,
  sm: 540px,
  md: 720px,
  lg: 992px,  // ← 这里也得对应调大，不能还是 960px
  xl: 1380px,
  xxl: 1880px
);

注意：$container-max-widths 的值应略小于下一个断点，否则会出现“跳变”或空白间隙。

VPS Bootstrap

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

下载

Offcanvas、Navbar 等组件的 breakpoint 参数受限于 `$grid-breakpoints` 键名

offcanvas 的 breakpoint 属性（如 data-bs-breakpoint="lg"）和 navbar 的 .navbar-expand-lg 类，都依赖 $grid-breakpoints 中定义的键名。你不能写 navbar-expand-1024px 或 data-bs-breakpoint="1024px"——这会直接失效，JS 不报错，但媒体查询根本不会匹配。

所以如果你新增了一个断点，比如 tablet: 832px，就必须把它加进 $grid-breakpoints，否则所有基于断点的组件都无法识别它：

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  tablet: 832px,  // ← 新增键名
  md: 768px,       // ← 注意：键名顺序不影响编译，但语义易混淆，建议按宽度升序排
  lg: 1024px
);

键名一旦定义，所有相关类（.offcanvas-tablet、.navbar-expand-tablet）才会被生成。

别忽略 `$grid-gutter-width` 和列数变量的联动影响

断点改了，常伴随布局密度调整。比如面向大屏后台系统，你拉宽了 lg 断点，可能还想让栅格间隙（gutter）变大一点，提升可读性；或者把默认 12 列改成 16 列以适配更细粒度的布局。

这些都需要显式覆盖：

$grid-gutter-width: 2rem;（全局 gutter，默认 1.5rem）
$grid-columns: 16;（影响所有 .col-* 类生成逻辑）
$grid-breakpoints 和 $container-max-widths 已提过，必须同步

漏掉 $grid-columns，即使你写了 .col-16，也不会生效——因为 Bootstrap 的 Sass 循环只生成到 $grid-columns 指定的列数。

改断点看着只是换几个数字，实际是牵一发而动全身：Sass 编译链、类名生成规则、组件 JS 行为边界、甚至栅格容器的流体计算逻辑，全绑在那张 map 上。最常被跳过的，就是 $container-max-widths 同步和 @import 顺序 —— 这两个一错，整个响应式布局就“看起来对，其实不对”。