直接复用bootstrap的.container和.row类在less中行不通，因其栅格依赖预编译变量和循环生成的.col--类，而less仅在编译期展开，不支持运行时动态推导宽度；须用递归mixin或each()提前生成响应式类，并注意percentage()返回字符串需配合unit()处理。
为什么直接复用Bootstrap的.container和.row类在Less里行不通
因为Bootstrap的栅格依赖大量预编译变量（如@grid-columns、@grid-gutter-width）和嵌套循环生成的.col-*-* 类，而Less本身不支持运行时动态生成类名——它只在编译期展开。你写.col-6，Less不会自动推导出width: 50%，除非你显式定义或用混合器（mixin）驱动计算。
关键点在于：必须把列数、断点、间距这些参数提前固化为变量，并用.each()或for循环（通过each()函数或递归mixin）生成响应式类。Less 4.0+ 支持each()，但旧版只能靠递归；若项目用的是Less 3.x，得避开each()写法。
用.make-grid-columns()混合器生成基础列宽
这个混合器负责把@columns（总列数）和@gutter（间隙）作为输入，输出.col-1到.col-@columns的宽度规则。注意：不能直接用width: percentage(1 / @columns)算单列，因为CSS里percentage()返回的是字符串，需配合unit()或直接用小数乘法。
- 定义变量：
@grid-columns: 12;、@grid-gutter-width: 1rem; - 混合器内用
loop递归生成类（Less 3.x兼容）：.make-grid-columns(@i: 1) when (@i =
- 调用：
.make-grid-columns();—— 它会生成.col-1到.col-12，比如.col-3对应width: 25%（3/12）
如何让.col-sm-6这类断点类生效
Less没有媒体查询的“作用域继承”，所以不能像Sass那样用@media包裹整个混合器再嵌套子选择器。必须把断点变量（@screen-sm-min等）提前声明，然后为每个断点单独调用列生成逻辑，并用@media包裹。
- 定义断点：
@screen-sm-min: 576px;、@screen-md-min: 768px; - 封装带断点的混合器：
.make-grid-columns-responsive(@breakpoint, @columns, @gutter) when (@breakpoint = sm) { @media (min-width: @screen-sm-min) { .make-grid-columns(@columns); } } .make-grid-columns-responsive(@breakpoint, @columns, @gutter) when (@breakpoint = md) { @media (min-width: @screen-md-min) { .make-grid-columns(@columns); } } - 调用：
.make-grid-columns-responsive(sm, 12, 1rem);→ 生成@media (min-width: 576px) { .col-sm-1, ..., .col-sm-12 }
注意：.col-sm-6不是独立类，而是.col-6在sm断点下的副本，命名空间靠类名前缀区分，不能指望Less自动拼接sm进选择器——得手动写.col-sm-@{i}。
为什么.row必须设margin-left/right负值
这是为了抵消.col的padding-left/right（即gutter）。如果只给.col加padding，左右边缘会多出一倍间隙。所以.row要用负边距“拉回”外边距，形成视觉对齐。
-
.row定义：.row { display: flex; flex-wrap: wrap; margin-left: unit(-@grid-gutter-width / 2, rem); margin-right: unit(-@grid-gutter-width / 2, rem); } -
.col定义：[class*="col-"] { padding-left: unit(@grid-gutter-width / 2, rem); padding-right: unit(@grid-gutter-width / 2, rem); } - 坑点：
unit()必须显式指定单位（rem），否则-@grid-gutter-width / 2会变成无单位数值，CSS解析失败
真正难缠的是嵌套.row：子.row的负边距会和父容器的padding冲突，这时候得加.no-gutters类手动清空，或者用:not(.no-gutters) > .row做条件控制——但Less不支持:not嵌套，只能提一层写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
