在bootstrap中，如何使缩略图流体调整好

Question

我正在使用bootstrap 2.0进行流畅的布局。但是，我发现当浏览器调整大小或从iPhone上看到它时它会破坏：

这是我的标记：

      <div id="features" class="row-fluid">
        <div class="span12">
          <ul class="thumbnails">
            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Orders" />
                <h3>Pedidos</h3>
                <p>Genera ordenes de pedidos para su facturacion posterior</p>
              </div>
            </li>

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Invoices" />
                <h3>Facturas</h3>
                <p>Factura las ventas realizadas</p>
              </div>
            </li>

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Customers" />
                <h3>Clientes</h3>
                <p>Ingrese & actuelize los datos de los clientes</p>
              </div>
            </li>

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Products & Stock" />
                <h3>Productos</h3>
                <p>Ingrese & actuelize los datos de los productos y su inventario</p>
              </div>
            </li>

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Sincronization with ERP" />
                <h3>Impresion</h3>
                <p>Genera impresion de tiquets en papel con la impresora P25</p>
              </div>
            </li>

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/128x128" width="128" height="128" alt="Sincronization with ERP" />
                <h3>Sincronizacion</h3>
                <p>Sincroniza los datos con ERPs seleccionados</p>
              </div>
            </li>
          </ul>
        </div><!--/span-->   
      </div><!--/row-->

（同样的标记，没有CSS应用也破坏了）

我已经尝试通过CSS来设置宽度/高度但是会破坏流程。

Answer 1

除非你使用的图像尺寸完全相同并且均匀分布，否则使用纯粹的css来解决你的挑战是非常困难的，尽管神奇的增强效果如何。您可以尝试使用.row代替.row-fluid来查看流体样式是否导致不良中断，但除此之外，如果您需要“防弹”，您可能需要考虑使用javascript。

可能类似于：masonry.js或Isotope

Answer 2

Bootstrap现在具有响应支持，以及3.0 Branch will have it by default。