用@for+@each生成.col-*类的核心是外层遍历断点map、内层遍历列数，避免手写48个类；常见错误包括生成.col-sm-0、硬写媒体查询值、内外层循环颠倒导致冗余；应定义断点map、用percentage($i/$grid-columns)计算宽度、保持$grid-columns=12以兼顾整除性与体积。
如何用 @for + @each 生成 .col-* 类
核心不是手写 48 个类，而是靠两层循环：外层遍历断点 map，内层遍历列数。Sass 编译时会把 $grid-columns: 12 展开为 12 次 .col-sm-1 到 .col-sm-12。
常见错误现象：
- 直接
@for $i from 0 through 12→ 多出无意义的.col-sm-0，干扰选择器优先级 - 把断点写成硬值
@media (min-width: 768px)→ 和字体缩放脱节，且无法复用变量做统一调整 - 在
@each外层套@for→ 生成冗余规则（比如.col-md-6和.col-lg-6宽度相同时也重复输出）
实操建议：
- 断点必须定义为 map：
$grid-breakpoints: ("sm": 576px, "md": 768px, "lg": 992px, "xl": 1200px) - 列宽计算别用
calc(100% / #{$i})，浏览器虽能解析，但不可控；改用预计算百分比：width: percentage($i / $grid-columns) - 想加
.col-xxl-*？只需提前声明$breakpoint-xxl: 1400px，再调一次@include make-grid("xxl")
为什么 $grid-columns 默认是 12，而不是 8 或 24
12 是整除性与体积的平衡点：它能被 1、2、3、4、6、12 整除，意味着 span 3（1/4）、span 4（1/3）、span 6（1/2）都无需小数或四舍五入。
实操建议：
- 别为了“设计稿像素刚好是 786px”就硬改
$grid-columns: 24——栅格是逻辑划分，不是像素对齐工具 - 若真需 24 列（如复杂后台），要同步检查所有
offset、push的计算是否溢出，比如.col-md-offset-25在 24 列下非法 - Sass 中除法在
calc()里必须显式带单位，例如：width: calc(#{$grid-column-width} * 3 + #{$grid-gutter-width} * 2)
@include container-fixed 怎么让 .container 宽度随断点变化
它本身不决定宽度，只提供基础居中和 padding。真正的响应式宽度靠媒体查询逐级覆盖 max-width，比如：
.container {
@include container-fixed;
@media (min-width: #{$breakpoint-sm}) { max-width: $container-sm; }
@media (min-width: #{$breakpoint-md}) { max-width: $container-md; }
}
容易踩的坑：
- 改了
$breakpoint-sm却忘了同步调$container-sm→ 新断点下容器突然变窄或溢出 - 直接在 CSS 里写
.container { width: 100% }→ 破坏所有断点逻辑，因为原生靠max-width + margin: 0 auto居中，不是width - Bootstrap 5+ 变量名已统一为
$breakpoint-sm，旧文档里的$screen-sm-min在 v4.6+ 就被标记 deprecated
@include make-col-ready() 和 grid-column-start 别混用
前者是 Sass mixin，只注入基础样式（box-sizing、padding、清除 float）；后者是纯 CSS 属性，用于 Grid 布局定位。两者属于不同布局范式。
常见错误现象：
- 写了
@include make-col-ready()但没调@include make-col(4)→ 元素宽度为auto，不占栅格 - 在 float 栅格里写
grid-column-start: 2→ 浏览器忽略 grid 属性，又因make-col-ready()清了float，导致元素塌陷 - 在 IE10/11 下混用 → 浏览器既不支持
grid-column，又清了float，布局完全错乱
真正关键的细节是：make-col-ready() 不等于“已响应”，它只是“准备就绪”。占几格、怎么响应，还得靠后续的 make-col 或媒体查询控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
