如何使用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做响应式图像和块？

回答

相关问题