Bootstrap栅格系统源码解析 Bootstrap Grid是如何用Sass实现的

作者：袖梨 2026-07-31

Bootstrap栅格系统源码解析 Bootstrap Grid是如何用Sass实现的的重点在于把前置条件、操作顺序和容易误判的地方分清楚。

Bootstrap容器宽度通过媒体查询与Sass变量联动动态变化，核心在_grid.scss中用@include container-fixed配合$breakpoint-*系列变量实现；修改断点需同步调整对应$container-*变量，否则响应失效。

container 宽度怎么随断点动态变化？

bootstrap 的 .container 不是写死一个 width，而是靠媒体查询 + sass 变量联动实现的。核心逻辑在 _grid.scss 里：它用 @include container-fixed 混入，再套几层 @media (min-width: $screen-sm-min) 来逐级覆盖 max-width。

容易踩的坑：

改 $screen-sm-min 但忘了同步调 $container-sm —— 容器在新断点下可能突然变窄或溢出
直接在 CSS 里覆盖 .container { width: 100% }，会破坏所有断点响应逻辑，因为原生是靠 max-width + margin: 0 auto 居中，不是 width
如果你用的是 Bootstrap 5+，$screen-sm-min 实际叫 $breakpoint-sm，变量名已统一为 $breakpoint-* 系列，旧文档里的 $screen-* 在 v4.6+ 就被标记 deprecated 了

实操建议：想定制小屏容器宽度？别硬写 media query，直接改 _variables.scss 里的 $container-sm: 720px，然后确保 $breakpoint-sm（默认 576px）比它小，否则断点不会触发。

col-* 类是怎么批量生成的？

不是手写 .col-sm-1 到 .col-sm-12，而是靠 make-grid-columns() 这个 mixin 循环生成的。它藏在 mixins/_grid-framework.scss 里，本质是一个 @for 循环，参数是列总数（默认 $grid-columns: 12）和断点前缀列表。

关键细节：

每轮循环算宽度： width: percentage($i / $grid-columns)，所以改 $grid-columns 会影响所有列类的百分比值
它同时生成 pull、push、offset 类，比如 .col-md-offset-3 就是靠 @include loop-grid-columns(..., offset) 出来的
如果只引入 bootstrap-grid.scss（不引完整 bootstrap），这个循环仍生效，但前提是 $grid-columns 和断点变量已提前定义好，否则编译报错 Undefined variable: "$grid-columns"

示例：想加一套「超大屏」列类 .col-xxl-*？不用重写全部，只需在自定义文件里加一行：@include make-grid("xxl");，前提是 $breakpoint-xxl 已声明。

row 为什么要有负 margin？

.row 的 margin-left: -15px; margin-right: -15px 是为了抵消列（.col-*）自带的 padding-left: 15px; padding-right: 15px。这是“gutter”（列间距）的经典实现法 —— 列内留白，行外反向拉回，保证整行视觉上左右对齐。

但要注意：

这个负 margin 在 Flexbox 模式下（Bootstrap 4+ 默认）依然保留，不是冗余：它配合 display: flex 保证子列能撑满父容器宽度，否则 padding 会让总宽超 100%
用 .no-gutters 类时，它干的事就是清掉 .row 的负 margin 和所有 .col-* 的 padding，不是只清 padding
如果你用 rem/em 定义 $grid-gutter-width（比如 1rem），那负 margin 也会跟着变 —— 动态适配字体缩放，但得确认设计稿是否真需要这种弹性

常见错误现象：手动给 .row 加 overflow: hidden 来“修复”水平滚动条？大概率是因为忘了清掉负 margin 或者嵌套了没闭合的 row，而不是 gutter 本身的问题。

Flexbox 模式下，grid mixin 还管用吗？

管用，但行为变了。make-row() 在 Bootstrap 4+ 里会根据 $enable-flex 开关决定是否加 display: flex 和 flex-wrap: wrap，而不再依赖 clearfix。

这意味着：

.col-* 的 float: left 被彻底移除，所以老式 IE（
align-items、justify-content 这些 flex 属性可以安全加到 .row 上，比如 .row.justify-content-center，源码里这些工具类就是靠 make-flex-grid-classes() 生成的
如果你关掉 $enable-flex: false 回退到 float 模式，所有 grid mixin 逻辑不变，但 make-row() 会切回 clearfix + float，且失去垂直居中能力