阅读背景:

尝试实现bootstrap3网格系统

来源:互联网 

这是一篇搁置了很久的博文,个人实现的关键代码如下:

// 这是用sass实现的,只是大致实现了网格系统和offset的功能
$size_list: (
    xs:  0,
    sm: 576,
    md: 992,
    lg: 1200
);

//为col数从1到12的网格分别设置适当的宽度,并且响应式布局为四种size
@each $key, $value in $size_list {

    @for $i from 1 through 12 {

        @media (min-width: #{$value}px) {
            .col-#{$key}-#{$i} {
                width: 100% * ($i / 12);
            }

            .col-#{$key}-offset-#{$i} {
                margin-left: 100% * ($i / 12);
            }
        }
    }
}
// 这是用sass实现的,只是大致实



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: