The bootstrap-3-grid-columns-clearing from sixfootsixdesigns

This is best and needted for me !

Thanks for this solution , i has search in google for some day with this solution , also it work in cross browser ? i need using this for my project !! many thanks !! Regards

Any update for bootstrap 3.0.2 ?

thanks (Y)

Avoid SASS from being compiled

Currently, SASS will try to compile and generate Undefined variable: $screen-sm-min. See screenshot below:

What you want to do is rename your multi-columns-row.scss file to begin with an underscore to prevent it from being compiled on its own:

multi-columns-row.scss > multi-columns-row.css (compiled... generates the above error)
_multi-columns-row.scss > (not compiled)

Lemme know what you think :)

Solving a limitation about classnames

Hi there,

Thanks for your nice solution.

Problem: I realized that there is a limitation in your solution, which is you have to put all classes in order to make it work like this:
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">...</div>
but it seems that col-md-4 and col-lg-4 in the above code can be removed.

My solution is this:

/* Bootstrap multi-same-columns
 **************************************************/

/* clear first in row in ie 8 or lower */
.multi-columns-row .first-in-row {
    clear: left;
}

/* clear the first in row for any block that has the class "multi-columns-row" */
.multi-columns-row .col-xs-6:nth-child(2n + 3) { clear: left; }
.multi-columns-row .col-xs-4:nth-child(3n + 4) { clear: left; }
.multi-columns-row .col-xs-3:nth-child(4n + 5) { clear: left; }
.multi-columns-row .col-xs-2:nth-child(6n + 7) { clear: left; }
.multi-columns-row .col-xs-1:nth-child(12n + 13) { clear: left; }

@media (min-width: 768px) {
    /* reset if we have sm class */
    .multi-columns-row [class*="col-"][class*="col-sm-"]{ clear: none; }


    /* clear first in row for small columns */
    .multi-columns-row .col-sm-6:nth-child(2n + 3) { clear: left; }
    .multi-columns-row .col-sm-4:nth-child(3n + 4) { clear: left; }
    .multi-columns-row .col-sm-3:nth-child(4n + 5) { clear: left; }
    .multi-columns-row .col-sm-2:nth-child(6n + 7) { clear: left; }
    .multi-columns-row .col-sm-1:nth-child(12n + 13) { clear: left; }
}
@media (min-width: 992px) {
    /* reset if we have md class */
    .multi-columns-row [class*="col-"][class*="col-md-"]{ clear: none; }

    /* clear first in row for medium columns */
    .multi-columns-row .col-md-6:nth-child(2n + 3) { clear: left; }
    .multi-columns-row .col-md-4:nth-child(3n + 4) { clear: left; }
    .multi-columns-row .col-md-3:nth-child(4n + 5) { clear: left; }
    .multi-columns-row .col-md-2:nth-child(6n + 7) { clear: left; }
    .multi-columns-row .col-md-1:nth-child(12n + 13) { clear: left; }
}
@media (min-width: 1200px) {
    /* reset if we have lg class */
    .multi-columns-row [class*="col-"][class*="col-lg-"]{ clear: none; }

    /* clear first in row for large columns */
    .multi-columns-row .col-lg-6:nth-child(2n + 3) { clear: left; }
    .multi-columns-row .col-lg-4:nth-child(3n + 4) { clear: left; }
    .multi-columns-row .col-lg-3:nth-child(4n + 5) { clear: left; }
    .multi-columns-row .col-lg-2:nth-child(6n + 7) { clear: left; }
    .multi-columns-row .col-lg-1:nth-child(12n + 13) { clear: left; }
}

Now you can use this code:
<div class="col-xs-6 col-sm-4">...</div>
instead of:
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">...</div>

or
<div class="col-xs-6 col-md-4">...</div>
instead of
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">...</div>

Hope that helps.

Bootstrap 3 carousel issue !

it dont work in bootstrap 3 carousel !

Awesome, Wondering how this could work inside a ng-repeat.

Awesome solution. I'm trying to get this to work within an ng-repeat, angularjs. not having any luck. Have any pointers?

sixfootsixdesigns / bootstrap-3-grid-columns-clearing Goto Github PK

bootstrap-3-grid-columns-clearing's People

Contributors

Stargazers

Watchers

Forkers

bootstrap-3-grid-columns-clearing's Issues

This is best and needted for me !

Any update for bootstrap 3.0.2 ?

Avoid SASS from being compiled

Solving a limitation about classnames

Bootstrap 3 carousel issue !

Awesome, Wondering how this could work inside a ng-repeat.

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent