Bootstrap 3 column clearfix working in Bootply but not on live site?

Question

I've been having problems with different length columns in Bootstrap 3 not aligning correctly and ending up, inadvertently, looking like a Masonry layout.

I found this solution: http://www.bluthemes.com/blog/3/clearing-bootstrap-3-columns

...and created a Bootply which works a treat: http://www.bootply.com/L6ocKtCcsI

However, on my test site the columns are still aligning incorrectly: http://www.nathonjoneswebdesign.co.uk/tmsa/TMSA-board-members.php

The CSS and HTML is the same on the test site as it is in my Bootply, so why isn't it responding in the same way?

Hope someone can point out the obvious. Thank you. NJ

Answer 1

In your styles.css, you have this code:

@media (min-width: 1200px) {
    .col-lg-1:nth-child(12n+1), 
    .col-lg-2:nth-child(6n+1), 
    .col-lg-3:nth-child(4n+1), 
    .col-lg-4:nth-child(3n+1), 
    .col-lg-6:nth-child(2n+1) {
        clear: left;
    }
}

And I'm sure similar for other break-points. Essentially this is telling the fifth element with a class of.col-lg-3 element not to float. Because you have a col-xs-12 element in the same row, above those, it is the 5th element. Put that col-xs-12 element in it's own row and it's fixed. Like so:

<div class="row">
    <div class="col-xs-12">
        <h1>TMSA Board Members</h1>
    </div>
</div>
<div class="row" id="staff">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        ...
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        ...
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        ...
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        ...
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        ...
    </div>
</div>