부트 스트랩에서 섬네일 유체의 크기를 잘 조절하는 방법

Question

유동적 인 레이아웃을 만들기 위해 부트 스트랩 2.0을 사용하고 있습니다. aplied 제로 CSS와

가

 <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로 폭/높이를 넣으려고했으나 흐름이 깨졌습니다.

Answer 1

부트 스트랩 지금 반응 지원을하고 3.0 분기 will have it by default.

Answer 2

크기가 동일하고 균등하게 분포 된 이미지를 사용하는 경우가 아니라면 마법적인 부스트랩이 어떤 방법에도 불구하고 순수 CSS로 도전 과제를 해결하는 것은 매우 어렵습니다. 유동적 스타일이 나쁜 휴식을 일으키는 지 확인하려면 .row-fluid 대신 .row을 사용해 볼 수도 있지만, 그 이상의 경우에는 "방탄"을 원할 경우 javascript 사용을 고려해야 할 수도 있습니다.

어쩌면 같은 : masonry.js 또는 Isotope