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

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 解决您的挑战是非常困难的，尽管 boostrap 有多么神奇。您可以尝试使用.row而不是.row-fluid查看流体样式是否会导致严重中断，但除此之外，如果您想要“防弹”，您可能需要考虑使用 javascript。

可能类似于：masonry.js或Isotope

Answer 2

Bootstrap 现在有了响应式支持，3.0 分支默认会有。