-
-
Save firepol/7942411 to your computer and use it in GitHub Desktop.
updated max-width: 767px to avoid breaking the existing behavior on col-sm
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.col-ms-1, | |
.col-ms-2, | |
.col-ms-3, | |
.col-ms-4, | |
.col-ms-5, | |
.col-ms-6, | |
.col-ms-7, | |
.col-ms-8, | |
.col-ms-9, | |
.col-ms-10, | |
.col-ms-11, | |
.col-ms-12 { | |
position: relative; | |
min-height: 1px; | |
padding-left: 15px; | |
padding-right: 15px; } | |
@media (min-width: 480px) and (max-width: 767px) { | |
.col-ms-1, | |
.col-ms-2, | |
.col-ms-3, | |
.col-ms-4, | |
.col-ms-5, | |
.col-ms-6, | |
.col-ms-7, | |
.col-ms-8, | |
.col-ms-9, | |
.col-ms-10, | |
.col-ms-11 { | |
float: left; } | |
.col-ms-1 { | |
width: 8.33333%; } | |
.col-ms-2 { | |
width: 16.66667%; } | |
.col-ms-3 { | |
width: 25%; } | |
.col-ms-4 { | |
width: 33.33333%; } | |
.col-ms-5 { | |
width: 41.66667%; } | |
.col-ms-6 { | |
width: 50%; } | |
.col-ms-7 { | |
width: 58.33333%; } | |
.col-ms-8 { | |
width: 66.66667%; } | |
.col-ms-9 { | |
width: 75%; } | |
.col-ms-10 { | |
width: 83.33333%; } | |
.col-ms-11 { | |
width: 91.66667%; } | |
.col-ms-12 { | |
width: 100%; } | |
.col-ms-push-1 { | |
left: 8.33333%; } | |
.col-ms-push-2 { | |
left: 16.66667%; } | |
.col-ms-push-3 { | |
left: 25%; } | |
.col-ms-push-4 { | |
left: 33.33333%; } | |
.col-ms-push-5 { | |
left: 41.66667%; } | |
.col-ms-push-6 { | |
left: 50%; } | |
.col-ms-push-7 { | |
left: 58.33333%; } | |
.col-ms-push-8 { | |
left: 66.66667%; } | |
.col-ms-push-9 { | |
left: 75%; } | |
.col-ms-push-10 { | |
left: 83.33333%; } | |
.col-ms-push-11 { | |
left: 91.66667%; } | |
.col-ms-pull-1 { | |
right: 8.33333%; } | |
.col-ms-pull-2 { | |
right: 16.66667%; } | |
.col-ms-pull-3 { | |
right: 25%; } | |
.col-ms-pull-4 { | |
right: 33.33333%; } | |
.col-ms-pull-5 { | |
right: 41.66667%; } | |
.col-ms-pull-6 { | |
right: 50%; } | |
.col-ms-pull-7 { | |
right: 58.33333%; } | |
.col-ms-pull-8 { | |
right: 66.66667%; } | |
.col-ms-pull-9 { | |
right: 75%; } | |
.col-ms-pull-10 { | |
right: 83.33333%; } | |
.col-ms-pull-11 { | |
right: 91.66667%; } | |
.col-ms-offset-1 { | |
margin-left: 8.33333%; } | |
.col-ms-offset-2 { | |
margin-left: 16.66667%; } | |
.col-ms-offset-3 { | |
margin-left: 25%; } | |
.col-ms-offset-4 { | |
margin-left: 33.33333%; } | |
.col-ms-offset-5 { | |
margin-left: 41.66667%; } | |
.col-ms-offset-6 { | |
margin-left: 50%; } | |
.col-ms-offset-7 { | |
margin-left: 58.33333%; } | |
.col-ms-offset-8 { | |
margin-left: 66.66667%; } | |
.col-ms-offset-9 { | |
margin-left: 75%; } | |
.col-ms-offset-10 { | |
margin-left: 83.33333%; } | |
.col-ms-offset-11 { | |
margin-left: 91.66667%; } | |
} | |
@media (min-width: 480px) and (max-width: 767px) { | |
.container { | |
max-width: 748px; } | |
.form-horizontal .form-group .control-label {text-align:right;} | |
} |
Perfect.
Thank you very much.
It is a usefull correction to orginal @andyl solution, thanks.
However one problem stiil remains: bootstrap scaling up functionality as mentionned in https://getbootstrap.com/examples/grid/
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
This is lost when adding bootstrap_ms.css.will not propagate for col-sm-6; we have to specify it explicitely with:Could it be fixed ? Regards
Typographical correction, sorry:
<div class="col-xs-12 col-ms-6">
will not propagate for col-sm-6;
we have to specify it explicitely with: <div class="col-xs-12 col-ms-6 col-sm-6">
@MathiasZaja - ms is bigger than sm here. Therefore, the correct propagation would be for <div class="col-xs-12 col-ms-6">
to propagate col-sm-12, not col-sm-6.
Thanks!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Excellent fork for excellent solution!
Please hint me how to add responsive utilities: hidden-ms and visible-ms,
I could probably add them myself, just need a little hint xD