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?
