Question

I’m working on a project for which I use Bootstrap 2.2.2. Due to its nature, it would be most convenient to NOT close the row every 12 columns, i.e.:

<div class="container">
    <div class="row">
        <div class="span4">content</div>
        <div class="span4">content</div>
        <div class="span4">content</div>
        <div class="span4">content</div>
        <div class="span4">content</div>
        <div class="span4">content</div>
        <div class="span4">content</div>
        (...)
    </div>
</div>

Does this method have any drawbacks? So far during testing I haven’t found any issues with such layout under Chrome, Firefox or IE 9. However, if there are any issues that you are aware of, I will appreciate any information (especially if it breaks the layout for any older browsers, although I do not care about IE7 or older).

Answer 1

One thing to watch out for is that if the spans are different heights, the order of your content could be thrown off because there isn’t the equivalent of a clearfix after each third span4.

See the second row on http://jsfiddle.net/panchroma/czxJB/ for an example of this.

This could be overcome with some custom CSS though. See the results of the third row which has this extra CSS applied to

.row.multiple .span4:nth-child(3n+4) {  
clear:left;
}

Good luck!