如何定制Bootstrap 4.1，仅保留栅格系统与响应式工具？

嗨，当然可以通过Bootstrap官方途径定制出仅包含栅格系统和响应式工具的4.1版本，完全不用手动去剥离冗余CSS，给你两种靠谱的方法：

这是最直观的方式，适合不想折腾代码的场景：

• 打开Bootstrap 4.x的官方定制界面（注意要对应4.1版本的定制入口）
• 在「Components」组件区域，只勾选「Grid system」，其他所有组件（比如按钮、表单、导航栏等）全部取消勾选
• 切换到「Utilities」工具区域，勾选和响应式工具相关的选项，比如「Display」「Visibility」（这些就是实现.d-none、.d-md-block这类响应式显示控制的核心），其他非必要工具可以取消
• 滚动到页面底部，点击「Compile and Download」，就能得到只包含你需要的栅格和响应式工具的自定义CSS文件了

如果你的项目已经在用Sass，这种方式灵活性更高，还能自定义栅格参数：

1. 先安装Bootstrap 4.1的Sass包，比如通过npm执行：

   npm install bootstrap@4.1.0
   

2. 创建一个自定义的Sass文件，比如命名为custom-bootstrap.scss
3. 在这个文件里，只导入栅格和响应式工具相关的核心模块，示例代码如下：

   // 可选：先导入变量文件，你可以在这里自定义栅格断点、列数等参数
   @import "node_modules/bootstrap/scss/variables";
   @import "node_modules/bootstrap/scss/mixins";
   
   // 导入栅格系统核心代码
   @import "node_modules/bootstrap/scss/grid";
   
   // 导入响应式显示控制工具（实现响应式隐藏/显示的类）
   @import "node_modules/bootstrap/scss/utilities/display";
   @import "node_modules/bootstrap/scss/utilities/visibility";
   
   // 如果需要响应式间距类（比如.mt-md-2），可以额外导入这个模块
   // @import "node_modules/bootstrap/scss/utilities/spacing";
   

4. 编译这个Sass文件为CSS，就能得到完全符合需求的精简版本了

另外要提一句，你之前用3.3版本的定制器不行是因为Bootstrap 3和4的代码结构差异很大，3.x的定制工具没法适配4.1的代码，所以一定要用对应4.x版本的官方工具哦。

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