2012-04-11 1 views
1

私は流体レイアウトを作るためにブートストラップ2.0を使用しています。しかし、私は、ブラウザが、私はiPhoneからそれを見たときにサイズを変更したりする場合、それは悪い破る見つける:ブートストラップでは、どのようにサムネイルの流体のリサイズを良くするのですか

Thumbnanil break bas

これは私のマークアップです:

 <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のapliedと同じマークアップ

私は幅と高さを入れてCSSを試しましたが、それはフローを破ります。

答えて

1

正確に同じサイズで均等に配分された画像を使用していない限り、魔法のブーストラップの仕方にもかかわらず、純粋なCSSでチャレンジを解決することは非常に困難です。流体のスタイルが悪いブレークを引き起こしているかどうかを確認するには、.row-fluidの代わりに.rowを試してみてください。しかし、それを超えると、「防弾性」が必要な場合はjavascriptの使用を検討する必要があります。

は多分のようなもの:masonry.jsまたはIsotope

関連する問題