CODEWITHSUNDEEP
twitter-bootstrap
prezes
prezes

Reputation: 129

Multiple spans per row in Twitter Bootstrap

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).

Upvotes: 1

Views: 2478

Answers (2)

Mangiucugna
Mangiucugna

Reputation: 1762

Great answer from David! This is my css derived from the answer and expanded for all the possible row/span, hope this helps

.row.multiple .span6:nth-child(2n+3), .row-fluid.multiple .span6:nth-child(2n+3) {  
    clear:left;
    margin-left: 0px;
}

.row.multiple .span4:nth-child(3n+4), .row-fluid.multiple .span4:nth-child(3n+4) {  
    clear:left;
    margin-left: 0px;
}

.row.multiple .span3:nth-child(4n+5), .row-fluid.multiple .span3:nth-child(4n+5) {  
    clear:left;
    margin-left: 0px;
}

.row.multiple .span2:nth-child(6n+7), .row-fluid.multiple .span2:nth-child(6n+7) {  
    clear:left;
    margin-left: 0px;
}

Upvotes: 2

David Taiaroa
David Taiaroa

Reputation: 25495

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!

Upvotes: 7

Related Questions