Stainless bootstrap column wrap

Question

Running Rails 4.1.4 with the latest versions of haml, haml-rails, sass and bootstrap-sass. For custom display, my HAML is this:

.tutors-listing .row - @users.each do |tutor| .col-xs-12.col-md-3 .row.tutor .col-xs-offset-1.col-xs-4.col-md-12 = image_tag tutor.photo, :class => 'img-responsive img-circle tutor-photo' %h4.tutor-name = tutor.first_name %p teaches %strong.tutor-skills = tutor.teachables 

However, this markup leads to the following failure:

I hope somoneone can determine what is wrong here. The midpoint breakpoint should be 4 columns.

Answer 1

This is caused by skills with 2 lines of text or more. This is a known bug when using the float property. Here is a small picture for understanding:

[Bootply] Problem

Option number 1: adjust the height

Your first option is to make the elements have the same height:

 .tutor { height: 500px; } 

• [Pro] Simple and working everywhere
• [Con] Use the magic number
• [Con] Limit the number of lines in skills
• [Con] Useless spaces in the modified version

[Bootply] Force height

Option # 2: use clearfix

The second option is to use clearfix and force the fifth element to be on a new line (the same for the 9th, 13th ...):

 .tutors-listing > .row > .col-md-3:nth-child(4n+1) { clear: both; } 

• [Pro] Doesn't limit the number of lines in skills
• [Pro] No useless spaces
• [Pro] No magic number
• [Con] One CSS rule for each size ( xs/sm/md/lg )
• [Con] The rule depends on your grid ( .col-xx-3 )

[Bootply] Clearfix

Answer 2

In my case, I wanted to show 3 items in a row on large screens, 2 on medium screens and 1 on smaller screens.

You can also uncomment the background colors to check when the effect is triggered.

http://www.bootply.com/QOor73wFAY#

 /* fixes for columns wrapping in odd ways due to variable height */ /* when showing 2 items per row, clear #1, 3, 5 */ @media (min-width: $screen-sm-min){ .cell-box:nth-child(2n+1){ clear: both; /* background-color: rgba(0, 0, 255, .5); /* blue */ } } /* when showing 3 items per row, clear #1, 4, 7 */ @media (min-width: $screen-md-min){ .cell-box:nth-child(2n+1){ clear: none; } .cell-box:nth-child(3n+1){ clear: both; /* background-color: rgba(0, 255, 0, .5); /* green */ } } 

Answer 3

Sometimes I run into this problem. I recommend trying to overwrite any add-ons or fields that you DO NOT need. First try changing the margin to 0. Then remove part of the gasket. It helped in some of my affairs.

Answer 4

In appearance, you represent all the columns in one row. You have to change it so that it starts a new row every 4 columns, i.e. (in plain old version)

  <% @users.each_slice(4).to_a.each do |chunk| %> <div class="row"> <% chunk.each do |tutors| %> <div class="col-sm-3"> ... </div> <% end %> </div> <% end %> 

You may not need to_a in the first loop