Irregular bootstrap column wrapping

问题:

Running Rails 4.1.4 with the latest releases of haml, haml-rails, sass, and bootstrap-sass. For a user display, my HAML is as such:

.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 results in the following glitch:

I'm hoping somenone can devine what's wrong here. At the medium breakpoint, there should be 4 columns evenly.

回答1:

This is caused by skills with 2 lines of text or more. It's a well-known bug when using float property. Here is a little picture to understand :

[Bootply] The issue

Option #1 : Force the height

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

.tutor {     height: 500px; } 

• [Pro] Simple and work everywhere
• [Con] Use a magic number
• [Con] Limit the number of lines in skills
• [Con] Useless whitespaces on modile version

[Bootply] Force height

Option #2 : Use a clearfix

Your second option is to use a clearfix, and force the 5th element to be on a new line (same for the 9th, the 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 whitespaces
• [Pro] No magic number
• [Con] One CSS rule per size (xs/sm/md/lg)
• [Con] The rule depends of your grid (.col-xx-3)

[Bootply] Clearfix

回答2:

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

You may also uncomment the background colors to verify when the effect is triggering.

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 */     } } 

回答3:

Sometimes, I run into this issue as well. I recommend trying to overwrite any padding or margin that you do NOT need. Try changing the margin to 0 first. Then remove some of the padding. That has helped in some of my cases.

回答4:

By the looks of it you are rendering all of the columns in a single row. You need to change it so that it starts a new row every 4 columns i.e. (in plain old erb)

        
                  
            ...          
             
    

You might not need the to_a on the first loop

文章来源: Irregular bootstrap column wrapping