title: Boostrap CSS - Show a collection of items sizely
body: <p>I've created a list of objects will be displayed into my View. Well, I want to display 3 or 4 per row. When I display 3, I use <code>class=&quot;span4&quot;</code>, and when I display 4, I use <code>class=&quot;span3&quot;</code>. Although, when the div overflow the <code>span12</code>, the next object will be displayed is in a wrong size, like this:</p>
  <p><img src="https://i.stack.imgur.com/NSNaf.png" alt="Wrong display" /></p>
  <p>Well, I want the fourth div display exactly above the first div.
  My code is like this:</p>
  <pre><code>&lt;div class=&quot;span2&quot;&gt;MENU&lt;/div&gt;
  &lt;div class=&quot;span10 container-fluid&quot;&gt;
      &lt;div id=&quot;products&quot; class=&quot;row-fluid&quot;&gt; 
      @foreach (Product product in Model)
      {
          &lt;div class=&quot;span4 item-bordered text-center&quot;&gt;
              &lt;h3&gt;@product.Name&lt;/h3&gt;  
              &lt;h6&gt;@product.Description&lt;/h6&gt;
          &lt;/div&gt;
      }
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here's a JSFiddle that reproduces my problem: <a href="http://jsfiddle.net/Kiwanax/utPsh/" rel="nofollow noreferrer">http://jsfiddle.net/Kiwanax/utPsh/</a></p>
  <p>Can someone help me? Thanks!!!</p>