html - 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>