bootstrap 官方不提供独立栅格 css 文件，因栅格类依赖基础重置、工具类及变量逻辑；可行方案有三：sass 按需编译、cdn 的 bootstrap-grid.min.css（需补 box-sizing 重置）、手写最小化栅格规则；均须配置 viewport meta 标签且注意 flex 依赖。
只用 Bootstrap 栅格系统，不加载整套 CSS
Bootstrap 官方不提供「仅栅格」的独立 CSS 文件下载。所谓“只引入栅格”，本质是手动提取或按需构建，而非直接引用某个现成的 grid-only.css —— 这个文件不存在。
为什么不能直接 link 一个栅格专用 CSS？
Bootstrap 5+ 的 CSS 是单体编译产物，bootstrap.min.css 中的栅格类（如 .row、.col-md-6）依赖基础重置（reboot）、工具类（.d-flex、.w-100）和部分变量计算逻辑（如断点媒体查询）。单独剥离会触发样式断裂，比如：
-
.container宽度失效（缺$container-max-widths对应的媒体查询） -
.col不换行（缺flex基础声明，来自reboot或utilities） -
.g-3间距为 0（缺spacing工具类的 padding 声明）
真正可行的三种轻量方案
以下方法均经实测（Bootstrap 5.3.3），可稳定支持响应式栅格，且体积控制在 8–12 KB（gzip 后）：
✅ 方案一：用官方 Sass 源码按需编译（推荐）
- 下载 Bootstrap 源码（
bootstrap/scss/目录） - 新建
_my-grid.scss，只保留必要导入：@import "functions"; @import "variables"; @import "mixins"; @import "grid";
- 编译后得到纯栅格 CSS，不含组件、表单、按钮等无关样式
- 注意：必须保留
functions和variables，否则breakpoint()等函数无法解析
✅ 方案二：用 CDN 提供的精简构建（仅限 Bootstrap 5.3+）
- 使用官方推荐的「CSS only」构建链接（非文档首页所列）：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap-grid.min.css" rel="stylesheet">
- 该文件包含
grid、containers、spacing、helpers四个模块，不含组件类（.btn、.card等） - 仍需手动补一行基础重置（否则
box-sizing可能异常）：<style>*, ::before, ::after { box-sizing: border-box; }</style>
✅ 方案三：手写最小化栅格规则（适合极简场景）
- 若只用
.container+.row+.col且固定断点（如仅 sm+），可手写 30 行内联 CSS - 重点复制 Bootstrap 的断点媒体查询逻辑和
flex布局声明，避免照抄 class 名导致冲突 - 缺点：无法响应
xxl断点，且后续升级需手动同步
容易被忽略的关键细节
无论选哪种方式，下面三点漏掉一个，栅格就大概率不工作：
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在，否则媒体查询失效 - 所有栅格类（如
.col-6）都依赖display: flex，若项目全局重置了flex行为（如某些 UI 库），需额外覆盖 -
bootstrap-grid.min.css不含data-bs-*属性支持，JS 组件（如 collapse、modal）完全不可用——这本来就是预期行为，别误以为“引入失败”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
