Bootstrap 5中添加额外自定义断点的正确方法

Bootstrap 4 升级到 5 后断点配置失效，核心是两个版本的Sass变量规则、关联配置要求有变动，按以下方式配置即可生效。

核心变动说明 #

• Bootstrap 5 要求所有覆写的Sass变量必须放在Bootstrap核心文件导入语句之前定义，后置定义无法覆盖带!default标识的默认变量
• 断点变量名必须为短横线连接的$grid-breakpoints，空格分隔的写法是无效变量名
• 新增断点必须同步配置$container-max-widths映射，否则对应断点下的容器最大宽度不会按预期生效

可直接复用的配置代码 #

// 所有自定义变量必须写在bootstrap导入之前
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1540px, // 覆盖默认1400px的xxl断点
  xxxl: 2160px // 新增的自定义超宽屏断点
);

// 同步配置各断点对应的容器最大宽度，数值略小于断点值预留边距即可
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1480px,
  xxxl: 2100px
);

// 变量定义完成后再导入Bootstrap核心文件
@import "bootstrap/scss/bootstrap";

注意事项 #

• 按上述配置后，Bootstrap会自动为所有新增断点生成全套响应式类，包括栅格类、间距类、显示隐藏类、弹性布局类等，无需额外配置
• 如果项目是直接引入编译后的Bootstrap CSS文件而非从Sass编译，无法自定义断点，必须使用Sass源码编译的方式才能修改、新增断点
• 断点值必须按从小到大的顺序排列，否则响应式媒体查询生成逻辑会出错

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