css - Twitter Bootstrap layout to "wrap" evenly on viewport resize -
i'm attempting create responsive layout using twitter bootstrap. there "grid" of images (100x100) i'd display in rows of 1,2 or 4 wide. i'm using ".row" within ".container-fluid" , span3 contain each item inside rows.
<div class="container-fluid"> <div class="row"> <div class="span3 product"><img src="//placehold.it/100x100"></div> <div class="span3 product"><img src="//placehold.it/100x100"></div> <div class="span3 product"><img src="//placehold.it/100x100"></div> <div class="span3 product"><img src="//placehold.it/100x100"></div> </div> <div class="row"> <div class="span3 product clearfix"><img src="//placehold.it/100x100"></div> <div class="span3 product"><img src="//placehold.it/100x100"></div> <div class="span3 product"><img src="//placehold.it/100x100"></div> <div class="span3 product"><img src="//placehold.it/100x100"></div> </div> </div>
the problem when browser resized width layout changes unevenly. example, when viewport between 769px , 795px wide rows 3 items, , following row 1 item. i'd rather have "even" rows of 2 or 4 items. see demo on bootply.
is there way bootstrap out of box, or need custom viewport calculations layout?
change class of .row divs .row-fluid.
this make either 4 items shown in row, or 1 if scale down window past point. never thing 3 items in row.