如何删除Bootstrap 5中自带的所有breakpoints（断点）？

方法一：通过Sass自定义编译（最彻底） #

该方案是官方原生支持的自定义方式，能从根源上不生成断点相关代码，无冗余

• 首先在你的自定义Sass文件中，在引入Bootstrap Sass文件之前，覆盖断点相关的核心变量，将其设为空值：

// 清空所有断点配置
$grid-breakpoints: ();
// 清空对应容器最大宽度配置
$container-max-widths: ();
// 禁用响应式字体大小
$enable-responsive-font-sizes: false;

• 之后正常引入Bootstrap的Sass入口文件即可：

@import "bootstrap/scss/bootstrap";

• 如果你完全不需要栅格系统，可额外添加变量$enable-grid-classes: false;，进一步删除所有栅格相关代码。

方法二：手动修改已编译的CSS文件 #

如果不使用Sass编译流程，直接使用官方预编译的CSS文件，可按以下步骤操作：

• 全局搜索CSS文件中的@media关键字，所有断点相关的代码都包裹在媒体查询规则块中
• 将所有@media开头的规则块完整删除，注意要删除整个包裹块（从@media行开始，到对应的闭合}为止），避免留下无效语法
• 删除完成后可通过CSS校验工具检查语法合法性，避免删错导致样式失效

注意事项 #

• 移除所有断点后，所有带断点后缀的响应式类（如d-md-none、col-lg-4等）都会失效，所有组件只会保留最小屏幕下的默认表现
• 如果仍需使用栅格布局，保留默认col-*类即可正常使用

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