title: In bootstrap, how make the thumbnails fluid resize well
body: <p>I'm using bootstrap 2.0 to make a fluid layout. However, I find it break bad when the browser is resize or when I see it from a iPhone:</p>
  
  <p><img src="https://i.stack.imgur.com/SQOc8.png" alt="Thumbnanil break bas"></p>
  
  <p>This is my markup:</p>
  
  <pre><code>      &lt;div id="features" class="row-fluid"&gt;
          &lt;div class="span12"&gt;
            &lt;ul class="thumbnails"&gt;
              &lt;li class="span4"&gt;
                &lt;div class="thumbnail"&gt;
                  &lt;img src="http://placehold.it/128x128" width="128" height="128" alt="Orders" /&gt;
                  &lt;h3&gt;Pedidos&lt;/h3&gt;
                  &lt;p&gt;Genera ordenes de pedidos para su facturacion posterior&lt;/p&gt;
                &lt;/div&gt;
              &lt;/li&gt;
  
              &lt;li class="span4"&gt;
                &lt;div class="thumbnail"&gt;
                  &lt;img src="http://placehold.it/128x128" width="128" height="128" alt="Invoices" /&gt;
                  &lt;h3&gt;Facturas&lt;/h3&gt;
                  &lt;p&gt;Factura las ventas realizadas&lt;/p&gt;
                &lt;/div&gt;
              &lt;/li&gt;
  
              &lt;li class="span4"&gt;
                &lt;div class="thumbnail"&gt;
                  &lt;img src="http://placehold.it/128x128" width="128" height="128" alt="Customers" /&gt;
                  &lt;h3&gt;Clientes&lt;/h3&gt;
                  &lt;p&gt;Ingrese &amp; actuelize los datos de los clientes&lt;/p&gt;
                &lt;/div&gt;
              &lt;/li&gt;
  
              &lt;li class="span4"&gt;
                &lt;div class="thumbnail"&gt;
                  &lt;img src="http://placehold.it/128x128" width="128" height="128" alt="Products &amp; Stock" /&gt;
                  &lt;h3&gt;Productos&lt;/h3&gt;
                  &lt;p&gt;Ingrese &amp; actuelize los datos de los productos y su inventario&lt;/p&gt;
                &lt;/div&gt;
              &lt;/li&gt;
  
              &lt;li class="span4"&gt;
                &lt;div class="thumbnail"&gt;
                  &lt;img src="http://placehold.it/128x128" width="128" height="128" alt="Sincronization with ERP" /&gt;
                  &lt;h3&gt;Impresion&lt;/h3&gt;
                  &lt;p&gt;Genera impresion de tiquets en papel con la impresora P25&lt;/p&gt;
                &lt;/div&gt;
              &lt;/li&gt;
  
              &lt;li class="span4"&gt;
                &lt;div class="thumbnail"&gt;
                  &lt;img src="http://placehold.it/128x128" width="128" height="128" alt="Sincronization with ERP" /&gt;
                  &lt;h3&gt;Sincronizacion&lt;/h3&gt;
                  &lt;p&gt;Sincroniza los datos con ERPs seleccionados&lt;/p&gt;
                &lt;/div&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;&lt;!--/span--&gt;   
        &lt;/div&gt;&lt;!--/row--&gt;
  </code></pre>
  
  <p>(The same markup with zero CSS aplied break bad too)</p>
  
  <p>I have tried by CSS to put a width/height but that break the flow.</p>