Bootstrap 4中使用bootstrap-grid需导入哪些资源？网格布局失效排查

我之前在项目里也碰到过一模一样的情况——单独用bootstrap-grid.css时，官网的示例布局完全乱掉，导入完整bootstrap.css就正常。其实问题出在Bootstrap的网格系统依赖一些基础样式和工具类，这些并没有包含在单独的bootstrap-grid.css里。

一、让官网Pricing示例正常工作需额外导入的资源 #

如果你只是想让那个Pricing示例的网格布局和样式都正常，除了bootstrap-grid.css，还需要导入以下内容：

• Reboot.css：这是Bootstrap的基础样式重置文件，它全局设置了box-sizing: border-box（这是网格列宽计算的核心前提），还统一了不同浏览器的元素默认样式（比如body的margin、padding）。没有它，网格的负margin、列padding都会因为盒模型的问题导致布局错乱。
• Utilities.css：示例里用到的py-3、my-2、text-center这些间距、排版工具类都在这个文件里，bootstrap-grid.css并不包含这些通用工具类。
• （可选）如果需要示例里的卡片、按钮样式，还得导入对应的组件样式，但如果只是关注网格布局，前两个就够了。

二、Bootstrap 4使用bootstrap-grid的最小依赖 #

如果你的需求只是纯网格布局功能（不需要额外的组件或通用工具类），那么最小依赖是：

1. 全局box-sizing设置：你甚至不需要完整的Reboot.css，只需要在自己的样式里添加这一行代码就行：

*, *::before, *::after {
  box-sizing: border-box;
}

2. bootstrap-grid.css本身：这个文件已经包含了所有网格相关的核心类：container/container-fluid、row、各种响应式col-*类，还有offset-*、order-*这类网格布局工具类。

这样就能保证网格系统的核心功能正常工作，不会出现布局错乱的问题。

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