lss实现了bootstrap的12网格布局，但实际上代码在100行以上，大概在100行以上吧
使用过bootstrap的人都知道，bootstrap强大的12网格系统； 在响应布局中，这种12网格布局非常有用。
有时候创建简单的页面并不希望将整个bootstrap引入页面，所以可以在空闲时间写下这个网格布局，定制bootstrap的方式、类名，当然还有这里的类名。
less的详细内容请参阅以下内容。 @container: m-container；
@columns-name: m-col；
@columns-pading: 15px；
@grid-count: 12；
@screen-sm-min: 768px；
@screen-md-min: 992px；
@screen-lg-min: 1200px；
. @{container}，
. @{container}-fluid{
padding-left : @ columns-pad ing；
padding-right : @ columns-pad ing；
边距-右：自动；
边距左边缘：自动；
最小宽度： 960 px； /*为了兼容不支持媒体选择的浏览器*
- WebKit-transition : width 0.9 s cubic-bezier (1，- 0.02，0，1.04 )； //for Safari and Chrome
- moz-transition 3360宽度0.9 s cubic-bezier (1，- 0.02，0，1.04 )； //for Firefox
- o-transition : width 0.9 s cubic-bezier (1，- 0.02，0，1.04 )； //for Opera
- ms-transition 3360宽度0.9 s cubic-bezier (1，- 0.02，0，1.04 )； //for ie
transition :宽度0.5 s cubic-bezier (1，- 0.02，0，1.04 )；
WebKit-box-sizing : border-box；
盒- sizing :盒；
-moz-box-sizing:border-box；
}
. @{container}-fluid{
最小宽度： 0；
width: 100%；
}
. row{
最小高度： 1px；
边距-左：-@ columns-pad ing；
边距-右：-@ columns-pad ing；
clear: both；
:注，
:法新社{
内容： '；
显示：表；
clear: both；
}
}
//列基础css
. columns-base-css (
定位：关系；
最小高度： 1px；
padding-right : @ columns-pad ing；
padding-left : @ columns-pad ing；
WebKit-box-sizing : border-box；
盒- sizing :盒；
-moz-box-sizing:border-box；
}
//循环列，设置基础css
. make-grid-columns (@ len : @ grid-count ) )
. col(@I ) {
@ class list 3360~'.@ { columns-name }-xs-@ { I }， @{columns-name}-sm-@{i}， @ { columns-name }
. col(@I1，~'@{classList} )；
}
. col(@I，@list ) when ) ) I=@len )。
@ class list 3360~'.@ { columns-name }-xs-@ { I }， @{columns-name}-sm-@{i}， @ { columns-name }
. col(@I1，~'@{classList}，@{list} )；
}
. col(@I，@list ) when ) @I@len )
@{list} {
. columns-base-css (；
}
}
. col(1) )。
}
. make-grid-columns(@grid-count )；
//循环生成列
. make-columns-loop(@type，@n，@i: 1) when ) (@I=@n ) ) ) ) ) ) ) ) ) ) ) ) ) )。
@ col-class-name : ~“@ { columns-name }-@ { type }；
. @{col-class-name}-@{i}{
width: @i/@n*100%；
浮动：左；
}
//偏移
. @{col-class-name}-offset-@{i}{
边距- left : @ I/@ n * 100 %；
}
//排序
. @{col-class-name}-pull-@{i}{
right: @i/@n*100%；
}
. @{col-class-name}-push-@{i}{
left: @i/@n*100%；
}
. make-columns-loop(@type，@n，) @i 1 )；
}
. make-columns-loop(xs，@grid-count )；
//媒体查询
. @{container}{
@ media (max-width : @ screen-sm-min ) (
最小宽度： 0；
}
@ media (最小宽度： @ screen-sm-min ) {
width: 750px；
最小宽度： 0；
}
@ media (最小宽度： @ screen-MD-min ) {
width: 970px；
最小宽度： 0；
}
@ media (最小宽度： @ screen-LG-min ) {
width: 1170px；
最小宽度： 0；
}
}
//媒体查询设置对应的列类型css
@ media (最小宽度： @ screen-sm-min ) {
. make-columns-loop(sm，@grid-count )；
}
@ media (最小宽度： @ screen-MD-min ) {
. make-columns-loop(MD，@grid-count )；
}
@ media (最小宽度： @ screen-LG-min ) {
. make-columns-loop(LG，@grid-count )；
}
这个less可以直接复制到less环境中进行编译。 如果需要重新定义类名，可以在开头更改//容器名称
@container: m-container；
//列名
@columns-name: m-col；
//列边距
@columns-pading: 15px；
//网格数(将屏幕分割为12部分) )。
@grid-count: 12；
//根据对应的尺寸
@screen-sm-min: 768px；
@screen-md-min: 992px；
@screen-lg-min: 1200px；
请将在线预览移动到这里。 http://runjs.cn/code/n1fsajds本文转载自https://segment fault.com/a/1190000010104455
有关详细信息，请参阅前端学习网站。