如何使用bootstrap做響應式圖像和塊？

如何在bootstrap中執行響應式產品圖像？我需要的所有列和圖像縮小，當我上漿喜歡這裏的瀏覽器：link 如何使用bootstrap做響應式圖像和塊？

<div id="product-list"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-15 col-md-3 col-sm-4 col-xs-12 item"> 
       <div class="product"> 
        <div class="product-image"> 
         <img src="http://placehold.it/220x322" width="220" height="322" class="img-responsive" alt="Simple product"> 
        </div> 
        <div class="product-info"> 
         <div class="product-name">Rick Owens</div> 
         <div class="product-model">Glass ice nappa leather bomber</div> 
         <div class="product-price">€ 1161.00</div> 
        </div> 
       </div> 
      </div> 
      <!-- more products --> 
     </div> 
    </div> 
</div>

這裏的HTML fiddle

來源

2015-04-02 Haroldas

你有沒有檢查通過引導給出的文檔？看起來你不熟悉bootstrap類。檢查這裏的文檔：[鏈接]（http://getbootstrap.com/getting-started/） – 2015-04-02 13:35:04

是的，我讀了，我需要5列首先，所以我編寫自己的col 15類，但下一個類是由bootstrap默認 – Haroldas 2015-04-02 13:37:56

我不明白你爲什麼做了col-15類？你能詳細解釋一下嗎？ – 2015-04-02 13:40:57

給您的圖片「IMG響應」類，並在其包裝默認引導樹（容器 - 行 - 列）

來源

2015-04-02 13:34:48

將Bootstrap內置的.img響應類添加到任何圖像標記都可以完成這項工作。

的.IMG響應類應用以下CSS屬性的圖像：

max-width: 100%; 
height: auto; 
display: block;

來源

2015-10-30 12:35:12 Taki

如何使用bootstrap做響應式圖像和塊？

回答

相關問題