~~~ @mixin fh { float: left; height: 100%; } // xs手机screen<767 @media (max-width: 767px) { .hidden-xs { display: none !important; } @for $i from 1 through 12 { .col-xs-#{$i} { width: 100% / 12 * $i; @include fh; } } } // sm平板 768<screen<991 @media (min-width: 768px) and (max-width:991px) { .hidden-sm { display: none !important; } .container { width: 750px; } @for $i from 1 through 12 { .col-sm-#{$i} { width: 100% / 12 * $i; @include fh; } .col-sm-offset-#{$i}{ margin-left:100%/12*$i; } } } // md电脑 992<screen<1119 @media (min-width: 992px) and (max-width:1119px) { .hidden-md { display: none !important; } @for $i from 1 through 12 { .col-md-#{$i} { width: 100% / 12 * $i; @include fh; } } .container { width: 970px; } } // lg大屏电脑 screen>1200 @media (min-width: 1200px) { .hidden-lg { display: none !important; } .container { width: 1170px; } @for $i from 1 through 12 { .col-lg-#{$i} { width: 100% / 12 * $i; @include fh; } } } .container { margin-left: auto; margin-right: auto; } *{margin:0;padding:0} .row::before{ content:""; display: table; } .row::after{ content:""; display: block; clear: both; } div{ box-sizing: border-box; } ~~~