在引导程序中，如何使缩略图流畅地调整大小答案

【问题标题】：In bootstrap, how make the thumbnails fluid resize well在引导程序中，如何使缩略图流畅地调整大小
【发布时间】：2013-02-12 22:36:17
【问题描述】：

我正在使用 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 设置宽度/高度，但这会破坏流程。

【问题讨论】：

标签： html twitter-bootstrap fluid-layout

【解决方案1】：

除非您使用大小完全相同且分布均匀的图像，否则使用纯 css 解决您的挑战非常困难，尽管 boostrap 有多么神奇。您可以尝试使用.row 而不是.row-fluid 来查看流畅的样式是否会导致严重中断，但除此之外，如果您想要“防弹”，您可能需要考虑使用javascript。

可能类似于：masonry.js 或 Isotope

【讨论】：

【解决方案2】：

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

【讨论】：