less - Bootstrap 3 mixin multiple make-*-column -
i'm using specific mixin trying make code more clear. instead of using:
<div class="col-lg-3 col-md-5 col-sm-6 col-xs-12"> i'm using:
<div class="stackoverflowrocksit"> and in mixins.less:
.stackoverflowrocksit{ .make-lg-column(3); .make-md-column(4); .make-sm-column(6); .make-xs-column(12); } it works xs , sm viewports, not when resize md or lg (then taking sm size). proper way create columns different viewports sizes? idea?
you should re-order mixin calls:
.stackoverflowrocksit { .make-xs-column(12); .make-sm-column(6); .make-md-column(4); .make-lg-column(3); } @seven-phases-max right. bootstrap's code mobile first, mean should start code smallest screen widths , features , properties when screen size become wider.
bootstrap use css media queries make css code responsive. in situation .make-lg-column(3); compiles css code shown below:
@media (min-width: 1200px) { .stackoverflowrocksit { float: left; width: 25%; } } if write .make-md-column(4); after .make-lg-column(3); @media (min-width: 992px) came @media (min-width: 1200px) , evaluates true screens wider 1200px , overwrites large columns code.
Comments
Post a Comment