PrinceXML Bootstrap Grid Fix
/* | |
PrinceXML calculates Bootstrap's ".66666667%" grid width literally, resulting in a | |
grid that is technically over 100%. Prince then drops the last column to a new row. | |
These styles override Bootstrap and set the appropriate grid elements to simply | |
end in "...6%". | |
*/ | |
.col-xs-11 { | |
width: 91.66666666% | |
} | |
.col-xs-8 { | |
width: 66.66666666% | |
} | |
.col-xs-5 { | |
width: 41.66666666% | |
} | |
.col-xs-2 { | |
width: 16.66666666% | |
} | |
.col-xs-pull-11 { | |
right: 91.66666666% | |
} | |
.col-xs-pull-8 { | |
right: 66.66666666% | |
} | |
.col-xs-pull-5 { | |
right: 41.66666666% | |
} | |
.col-xs-pull-2 { | |
right: 16.66666666% | |
} | |
.col-xs-push-11 { | |
left: 91.66666666% | |
} | |
.col-xs-push-8 { | |
left: 66.66666666% | |
} | |
.col-xs-push-5 { | |
left: 41.66666666% | |
} | |
.col-xs-push-2 { | |
left: 16.66666666% | |
} | |
.col-xs-offset-11 { | |
margin-left: 91.66666666% | |
} | |
.col-xs-offset-8 { | |
margin-left: 66.66666666% | |
} | |
.col-xs-offset-5 { | |
margin-left: 41.66666666% | |
} | |
.col-xs-offset-2 { | |
margin-left: 16.66666666% | |
} | |
@media (min-width: 768px) { | |
.col-sm-11 { | |
width: 91.66666666% | |
} | |
.col-sm-8 { | |
width: 66.66666666% | |
} | |
.col-sm-5 { | |
width: 41.66666666% | |
} | |
.col-sm-2 { | |
width: 16.66666666% | |
} | |
.col-sm-pull-11 { | |
right: 91.66666666% | |
} | |
.col-sm-pull-8 { | |
right: 66.66666666% | |
} | |
.col-sm-pull-5 { | |
right: 41.66666666% | |
} | |
.col-sm-pull-2 { | |
right: 16.66666666% | |
} | |
.col-sm-push-11 { | |
left: 91.66666666% | |
} | |
.col-sm-push-8 { | |
left: 66.66666666% | |
} | |
.col-sm-push-5 { | |
left: 41.66666666% | |
} | |
.col-sm-push-2 { | |
left: 16.66666666% | |
} | |
.col-sm-offset-11 { | |
margin-left: 91.66666666% | |
} | |
.col-sm-offset-8 { | |
margin-left: 66.66666666% | |
} | |
.col-sm-offset-5 { | |
margin-left: 41.66666666% | |
} | |
.col-sm-offset-2 { | |
margin-left: 16.66666666% | |
} | |
} | |
@media (min-width: 992px) { | |
.col-md-11 { | |
width: 91.66666666% | |
} | |
.col-md-8 { | |
width: 66.66666666% | |
} | |
.col-md-5 { | |
width: 41.66666666% | |
} | |
.col-md-2 { | |
width: 16.66666666% | |
} | |
.col-md-pull-11 { | |
right: 91.66666666% | |
} | |
.col-md-pull-8 { | |
right: 66.66666666% | |
} | |
.col-md-pull-5 { | |
right: 41.66666666% | |
} | |
.col-md-pull-2 { | |
right: 16.66666666% | |
} | |
.col-md-push-11 { | |
left: 91.66666666% | |
} | |
.col-md-push-8 { | |
left: 66.66666666% | |
} | |
.col-md-push-5 { | |
left: 41.66666666% | |
} | |
.col-md-push-2 { | |
left: 16.66666666% | |
} | |
.col-md-offset-11 { | |
margin-left: 91.66666666% | |
} | |
.col-md-offset-8 { | |
margin-left: 66.66666666% | |
} | |
.col-md-offset-5 { | |
margin-left: 41.66666666% | |
} | |
.col-md-offset-2 { | |
margin-left: 16.66666666% | |
} | |
} | |
@media (min-width: 1200px) { | |
.col-lg-11 { | |
width: 91.66666666% | |
} | |
.col-lg-8 { | |
width: 66.66666666% | |
} | |
.col-lg-5 { | |
width: 41.66666666% | |
} | |
.col-lg-2 { | |
width: 16.66666666% | |
} | |
.col-lg-pull-11 { | |
right: 91.66666666% | |
} | |
.col-lg-pull-8 { | |
right: 66.66666666% | |
} | |
.col-lg-pull-5 { | |
right: 41.66666666% | |
} | |
.col-lg-pull-2 { | |
right: 16.66666666% | |
} | |
.col-lg-push-11 { | |
left: 91.66666666% | |
} | |
.col-lg-push-8 { | |
left: 66.66666666% | |
} | |
.col-lg-push-5 { | |
left: 41.66666666% | |
} | |
.col-lg-push-2 { | |
left: 16.66666666% | |
} | |
.col-lg-offset-11 { | |
margin-left: 91.66666666% | |
} | |
.col-lg-offset-8 { | |
margin-left: 66.66666666% | |
} | |
.col-lg-offset-5 { | |
margin-left: 41.66666666% | |
} | |
.col-lg-offset-2 { | |
margin-left: 16.66666666% | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment