Assume I have the following nesting:
<div class="cointainer-fluid">
<div class="row-fluid">
<div class="span3">
<!-- left sidebar here -->
</div>
<div class="span9">
<!-- main content here -->
</div>
</div>
</div>
I'd like to put an unknown number of <div class="span3"></div> in the main content area. (Each of the span3 is suppose to contain a product photo, name, price, etc.) Of course, my aim is that be responsive. So, I might display 20 products, which I'd like to possibly display 5 products per "row" on a wide screen, then 4 products per "row" on a slightly less wide screen, then 3, then 2, then 1. For example (each X represents a product):
Wide Screen
row 1: X X X X X
row 2: X X X X X
row 3: X X X X X
row 4: X X X X X
Less Wide Screen
row 1: X X X X
row 2: X X X X
row 3: X X X X
row 4: X X X X
row 5: X X X X
Even Less Wide Screen
row 1: X X X
row 2: X X X
row 3: X X X
row 4: X X X
row 5: X X X
row 6: X X X
row 7: X X
It seems like I need to do nested rows. However, if I do that, then I'll only be able to fit a certain amount of products in each nested row. That'll cause problems as the screen width decreases, for example (each X represents a product):
Wide Screen
row 1: X X X X X
row 2: X X X X X
row 3: X X X X X
Less Wide Screen
row 1: X X X X
X
row 2: X X X X
X
row 3: X X X X
X
How do I do what I want to do in Twitter Bootstrap?
