Bootstrap 3图像响应高度不起作用

Question

我有这个div：

<section id="categorias">
 <div class="container content-section">
  <div class="row">
     <div  class="col-md-3">
        <img class="img img-responsive" src="img/catmusica.png"></img>
     </div>
     <div class="col-md-3">
        <img class="img-responsive" src="img/catpaisajes.png"></img>
     </div>
     <div class="col-md-3">
        <img class="img-responsive" src="img/catgrafiti.png"></img>
     </div>
     <div class="col-md-3" >
        <img class="img-responsive" src="img/catpoly.png"></img>
     </div>
  </div>
</div>
</section>

看起来像这样：

当我缩小窗口时，我想保持4列或至少2列以上和2列，但这会发生：

我只有bootstraps css。

由于

Answer 1

您还应该为较小的屏幕添加网格系统类 - col-sm-3和col-xs-3。请参阅以下代码：

<section id="categorias">
 <div class="container content-section">
  <div class="row">
     <div  class="col-md-3 col-sm-3 col-xs-3">
        <img class="img img-responsive" src="img/catmusica.png"></img>
     </div>
     <div class="col-md-3 col-sm-3 col-xs-3">
        <img class="img-responsive" src="img/catpaisajes.png"></img>
     </div>
     <div class="col-md-3 col-sm-3 col-xs-3">
        <img class="img-responsive" src="img/catgrafiti.png"></img>
     </div>
     <div class="col-md-3 col-sm-3 col-xs-3" >
        <img class="img-responsive" src="img/catpoly.png"></img>
     </div>
  </div>
</div>
</section>

working example

如果你想在较小的屏幕上只有2列，那么你需要在div包装图像上应用这些类：

<div  class="col-md-3 col-sm-6 col-xs-6">
   <img class="img img-responsive" src="img/catmusica.png"></img>
</div>