Skip to content

Instantly share code, notes, and snippets.

@rbravo
Last active December 10, 2015 21:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rbravo/77474b05caa8345e8ba9 to your computer and use it in GitHub Desktop.
Save rbravo/77474b05caa8345e8ba9 to your computer and use it in GitHub Desktop.
Fixes Bootstrap 3 line breaks using grid system when all items have the same class and one item is higher then the others (line breaks weirdly when this happens)
@media (max-width: 767px) { /*XS*/
.row-fluid > .col-xs-6:nth-child(odd),
.row > .col-xs-6:nth-child(odd) {
clear: left;
}
.row-fluid > .col-xs-6:nth-child(even),
.row > .col-xs-6:nth-child(even) {
clear: right;
}
.row-fluid > .col-xs-4:nth-child(3n+3),
.row > .col-xs-4:nth-child(3n+3) {
clear: right;
}
.row-fluid > .col-xs-4:nth-child(3n+4),
.row > .col-xs-4:nth-child(3n+4) {
clear: left;
}
.row-fluid > .col-xs-3:nth-child(4n+4),
.row > .col-xs-3:nth-child(4n+4) {
clear: right;
}
.row-fluid > .col-xs-3:nth-child(4n+5),
.row > .col-xs-3:nth-child(4n+5) {
clear: left;
}
}
@media (min-width: 768px) and (max-width: 991px) { /*SM*/
.row-fluid > .col-sm-6:nth-child(odd),
.row > .col-sm-6:nth-child(odd) {
clear: left;
}
.row-fluid > .col-sm-6:nth-child(even),
.row > .col-sm-6:nth-child(even) {
clear: right;
}
.row-fluid > .col-sm-4:nth-child(3n+3),
.row > .col-sm-4:nth-child(3n+3) {
clear: right;
}
.row-fluid > .col-sm-4:nth-child(3n+4),
.row > .col-sm-4:nth-child(3n+4) {
clear: left;
}
.row-fluid > .col-sm-3:nth-child(4n+4),
.row > .col-sm-3:nth-child(4n+4) {
clear: right;
}
.row-fluid > .col-sm-3:nth-child(4n+5),
.row > .col-sm-3:nth-child(4n+5) {
clear: left;
}
}
@media (min-width: 992px) and (max-width: 1199px) { /*MD*/
.row-fluid > .col-md-6:nth-child(odd),
.row > .col-md-6:nth-child(odd) {
clear: left;
}
.row-fluid > .col-md-6:nth-child(even),
.row > .col-md-6:nth-child(even) {
clear: right;
}
.row-fluid > .col-md-4:nth-child(3n+3),
.row > .col-md-4:nth-child(3n+3) {
clear: right;
}
.row-fluid > .col-md-4:nth-child(3n+4),
.row > .col-md-4:nth-child(3n+4) {
clear: left;
}
.row-fluid > .col-md-3:nth-child(4n+4),
.row > .col-md-3:nth-child(4n+4) {
clear: right;
}
.row-fluid > .col-md-3:nth-child(4n+5),
.row > .col-md-3:nth-child(4n+5) {
clear: left;
}
}
@media (min-width: 1200px) { /*LG*/
.row-fluid > .col-lg-6:nth-child(odd),
.row > .col-lg-6:nth-child(odd) {
clear: left;
}
.row-fluid > .col-lg-6:nth-child(even),
.row > .col-lg-6:nth-child(even) {
clear: right;
}
.row-fluid > .col-lg-4:nth-child(3n+3),
.row > .col-lg-4:nth-child(3n+3) {
clear: right;
}
.row-fluid > .col-lg-4:nth-child(3n+4),
.row > .col-lg-4:nth-child(3n+4) {
clear: left;
}
.row-fluid > .col-lg-3:nth-child(4n+4),
.row > .col-lg-3:nth-child(4n+4) {
clear: right;
}
.row-fluid > .col-lg-3:nth-child(4n+5),
.row > .col-lg-3:nth-child(4n+5) {
clear: left;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment