结合sass与css自定义bootstrap 5的断点变量，核心做法是在引入bootstrap源码之前，通过覆盖`$grid-breakpoints` sass映射变量来定义新的断点，随后重新编译或按需导入相关模块以生成对应的css媒体查询。具体而言，你需要在sass文件中声明一个新的map结构，键为断点名称（如`md`），值为像素宽度，并确保包含默认的`xs`断点（通常设为0）。这样做会直接改变`container`、`row`以及响应式工具类的生效阈值。需要注意的是，如果仅修改了sass变量而未正确配置构建流程，生成的css可能不会反映这些更改，因此必须确保sass编译器处理了这些变量并输出了最终的样式表。
如何定义新的断点映射
要定义新的断点，必须在导入Bootstrap的任何文件之前，声明一个名为`$grid-breakpoints`的Sass Map。这个Map的结构是键值对，键是断点的缩写（如`sm`, `md`, `lg`），值是断点的最小宽度。默认情况下，Bootstrap 5使用`xs: 0`, `sm: 576px`, `md: 768px`, `lg: 992px`, `xl: 1200px`, `xxl: 1400px`。你可以完全替换这个Map，或者基于默认值进行修改。例如，如果你想将`md`断点从768px改为800px，只需在代码中重新赋值即可。关键在于，这个变量必须是全局可访问的，并且在Bootstrap的网格系统被加载前生效。
$grid-breakpoints: ( xs: 0, sm: 576px, md: 800px, lg: 992px, xl: 1200px, xxl: 1400px ); @import "bootstrap/scss/bootstrap";
上述代码展示了如何定义自定义断点。首先定义了`$grid-breakpoints` Map，其中`md`被修改为800px。然后导入Bootstrap。这样，所有依赖`$grid-breakpoints`的组件（如容器、栅格）都会使用新的断点值。运行此Sass代码后，生成的CSS中将包含@media (min-width: 800px)的规则，而不是原来的768px。
如何验证断点已生效
验证断点是否生效的最直接方法是检查生成的CSS文件或使用浏览器开发者工具。当你在Sass中修改了`$grid-breakpoints`并重新编译后，生成的CSS中应该出现对应新宽度的媒体查询。例如，如果你将`md`改为800px，那么在`.container`的样式中，你应该能看到@media (min-width: 800px) { ... }这样的规则。此外，你可以通过在HTML中使用响应式类（如`d-none d-md-block`）来测试。当窗口宽度在768px到800px之间时，如果使用默认Bootstrap，该类元素应隐藏；但如果使用了自定义断点，该元素应保持隐藏直到800px。这种视觉反馈能直观地确认断点已按预期调整。
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 800px) {
.container {
max-width: 720px;
}
}
以上CSS片段展示了当`md`断点设置为800px时，生成的`.container`样式。注意@media查询中的800px，这证实了Sass变量已成功转换为CSS媒体查询。开发者可以通过检查网络请求中的CSS文件或直接在浏览器中查看计算样式来确认这一点。如果看到的仍然是768px，则说明Sass变量未被正确覆盖或编译过程未重新运行。
自定义断点对现有响应式类的影响
当你自定义了断点变量后，所有基于这些断点的Bootstrap响应式类都会受到影响。例如，`d-md-block`类原本在`md`断点（768px）及以上显示块级元素，如果`md`被改为800px，那么该类将在800px及以上才生效。这意味着在768px到800px之间的视口中，元素将保持默认状态（如`d-none`或内联）。这种影响是全局性的，适用于所有使用`$grid-breakpoints`的组件，包括栅格列、间距工具、显示/隐藏类等。因此，在自定义断点后，务必全面测试网站在不同视口下的表现，特别是那些依赖于特定断点的布局部分。如果发现布局异常，可能需要调整HTML结构或添加自定义CSS来弥补断点变化带来的间隙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
