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 ниже, когда Я сжимаю окно, но это происходит:

У меня есть только бутстрапы css.

Благодаря

Answer 1

Вы также должны добавить системные классы сетки для небольших экранов - Col-СМ-3 и Col-хз-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>