Отзывчивая галерея изображений bootstrap 3

Question

Я пытаюсь, через несколько дней, создать галерею с изображениями с немного другим размером, но с одинаковой компоновкой.

Как я могу заставить его работать в режиме просмотра md, вызывая максимальную ширину 400px для контейнера div, обходной путь создаст пробел под каждым изображением в виде xs и sm.

То, что я хочу достичь, - это галерея с изображениями с максимальной шириной и максимальной высотой и, конечно же, не искаженная. http://www.bootply.com/qsy3HNl8DK

Non отзывчивым Пример компоновки:

http://jsfiddle.net/npek7uxh/

<div class="container"> 
    <img class="img-responsive" src="http://placehold.it/400x610" /> 
</div> 

Answer 1

Попробуйте использовать некоторые запросы CSS медиа целевой точно хз и взгляды см. Эти размеры используются бутстрапе: - Л.Г.:> 1200px - мкр:> 992px - см:> 768px - хз: < 768px

Так что этот код будет направлен именно на см и хз:

@media (max-width: 992px) { 
img { 
    margin-bottom:0; 
} 
} 

Answer 2

html немного запутан, но вы можете сделать это без каких-либо пользовательских CSS. Короче говоря, вы комбинируете clearfix с visble-xs/sm/md/lg, чтобы вставить clearfix для сброса строки в нужном месте, но только на определенных устройствах.

т.е. вставить его после каждых 2-х изображений на хз <div class="clearfix visible-xs"></div> и каждые 3 изображений только для см <div class="clearfix visible-sm"></div> и каждые 4 изображений для хз (потому что в 2 раза) и мкр Л.Г. <div class="clearfix visible-xs visible-md visible-lg"></div>.

Пример: http://www.bootply.com/6BkXDk68Cu