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.


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -