Call Bootstrap 3 Log

Question

I am working with bootstrap 3 and I am new to it, but it seems like a pretty simple transition from 2.

Here is the jsfiddle with the code: http://jsfiddle.net/AHvLW/

And here is the image of how it is displayed when they are all in col-md-4:

I do not understand, but works fine in jsFiddle, but not in my index file. Does anyone experience a similar problem, perhaps know what is connected with it?

Answer 1

Since the columns are not all equal in height, you need to add clearfix <div> for large viewports in the same way a new line should start, that is, between your third and fourth columns:

 <div class="row"> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div> <!-- Add the extra clearfix for only the required viewport --> <div class="clearfix visible-md visible-lg"></div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div> </div> 

Demo script

Answer 2

You can easily solve this with css:

 .col-md-4:nth-child(3n+1){ clear: left; } 

Found this solution here

Answer 3

not the answer to your question, but you should be able to optimize your code, since there is no need to use all size classes.

 <div class="row"> <div class="col-md-4 col-xs-6">...</div> <div class="col-md-4 col-xs-6">...</div> <div class="col-md-4 col-xs-6">...</div> <!-- Add the extra clearfix for only the required viewport --> <div class="clearfix visible-md visible-lg"></div> <div class="col-md-4 col-xs-6">...</div> <div class="col-md-4 col-xs-6">...</div> <div class="col-md-4 col-xs-6">...</div> </div> 

Answer 4

Check if the div tags are closed properly and the classes you use are correctly referenced in your code.

Answer 5

If you are looking for a solution in which you do not mind that all three columns are the same height, and you cannot use the wrapper due to calling different column numbers at different screen sizes, you can apply a rule similar to my solution when I apply an identifier to the main shell of the columns, and then create the size of the column to have a minimum height.

 main#shop .col-md-3 { min-height:600px; } 

Answer 6

Thought this may help some people. Just add the following to your stylesheet. I provided CSS or SCSS.

CSS

 /*================ Row Uniform ==================*/ .row-uniform { margin-right: -15px; margin-left: -15px; } .row-uniform:after { clear: both; } .row-uniform:before { display: table; content: ''; } .row-uniform .col-xs-6:nth-child(2n+1) { clear: left; } .row-uniform .col-xs-4:nth-child(3n+1) { clear: left; } .row-uniform .col-xs-3:nth-child(4n+1) { clear: left; } .row-uniform .col-xs-2:nth-child(6n+1) { clear: left; } @media (min-width: 768px) and (max-width: 992px) { .row-uniform .col-sm-6:nth-child(2n+1) { clear: left; } .row-uniform .col-sm-4:nth-child(3n+1) { clear: left; } .row-uniform .col-sm-3:nth-child(4n+1) { clear: left; } .row-uniform .col-sm-2:nth-child(6n+1) { clear: left; } } @media (min-width: 992px) and (max-width: 1200px) { .row-uniform .col-md-6:nth-child(2n+1) { clear: left; } .row-uniform .col-md-4:nth-child(3n+1) { clear: left; } .row-uniform .col-md-3:nth-child(4n+1) { clear: left; } .row-uniform .col-md-2:nth-child(6n+1) { clear: left; } } @media (min-width: 1200px) { .row-uniform .col-lg-6:nth-child(2n+1) { clear: left; } .row-uniform .col-lg-4:nth-child(3n+1) { clear: left; } .row-uniform .col-lg-3:nth-child(4n+1) { clear: left; } .row-uniform .col-lg-2:nth-child(6n+1) { clear: left; } } 

SCS

 /*================ Row Uniform ==================*/ .row-uniform { margin-right: -15px; margin-left: -15px; &:after { clear:both; } &:before { display: table; content: ''; } // 2 .col-xs-6:nth-child(2n+1) { clear: left; } // 3 .col-xs-4:nth-child(3n+1) { clear: left; } // 4 .col-xs-3:nth-child(4n+1) { clear: left; } // 6 .col-xs-2:nth-child(6n+1) { clear: left; } // sm @media (min-width:768px) and (max-width:992px) { // 2 .col-sm-6:nth-child(2n+1) { clear: left; } // 3 .col-sm-4:nth-child(3n+1) { clear: left; } // 4 .col-sm-3:nth-child(4n+1) { clear: left; } // 6 .col-sm-2:nth-child(6n+1) { clear: left; } } // md @media (min-width:992px) and (max-width:1200px) { // 2 .col-md-6:nth-child(2n+1) { clear: left; } // 3 .col-md-4:nth-child(3n+1) { clear: left; } // 4 .col-md-3:nth-child(4n+1) { clear: left; } // 6 .col-md-2:nth-child(6n+1) { clear: left; } } // lg @media (min-width:1200px) { // 2 .col-lg-6:nth-child(2n+1) { clear: left; } // 3 .col-lg-4:nth-child(3n+1) { clear: left; } // 4 .col-lg-3:nth-child(4n+1) { clear: left; } // 6 .col-lg-2:nth-child(6n+1) { clear: left; } } } 

Then you just give your strings a new class equal to the string.

 <div class="row-uniform"> <div class="col-sm-6 col-md-4 col-lg-3"> </div> <div class="col-sm-6 col-md-4 col-lg-3"> </div> <div class="col-sm-6 col-md-4 col-lg-3"> </div> <div class="col-sm-6 col-md-4 col-lg-3"> </div> <div class="col-sm-6 col-md-4 col-lg-3"> </div> <div class="col-sm-6 col-md-4 col-lg-3"> </div> <div class="col-sm-6 col-md-4 col-lg-3"> </div> </div>