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，且失去垂直居中能力
真正容易被忽略的点：Flexbox 下 .col 的等高行为是自动的，但如果你在列里用了 height: 100% 却没给父 .row 设高度，它不会如预期撑开 —— 因为 flex item 的百分比高度需父容器有明确高度，这不是 grid 源码问题，是 CSS Flex 基础规则。
