Динамические строки в Bootstrap

Question

У меня есть 8 изображений для отображения в сетке Bootstrap. Спасибо, что код:

<div class="row">
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
</div>

<div class="row">
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
</div>

На экранах lg, md и sm он отображается так ("X" обозначает изображение):

XXXX

XXXX

и на размер экрана хс, вот так:

Икс

Икс

Икс

Икс

Икс

Икс

Икс

Икс

Я хочу добиться:

отображение на экранах lg, md и sm:

XXXX

XXXX

и отображение на экране размера хс:

XX

XX

XX

XX

Кто-нибудь знает, как это сделать?

Answer 1

Просто добавьте свой xs объявления, делающие контейнеры изображения, занимают 6 столбцов в этом размере:

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

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

Answer 2

В Bootstrap мы используем объявления типа sm (маленькие устройства), чтобы определить, какие медиа-запросы будут запускать классы столбцов для определенного разрешения.

xs обозначает очень маленький (смартфоны / мобильные телефоны большинство)sm стоит для небольших устройств (планшетов большинство)md означает средние устройства (большинство компьютеров и ноутбуков не старшего поколения)lg обозначает большие устройства (HD-экраны, сетчатки устройства и т. д.)

Когда вы используете класс, как col-sm-3 вы говорите это от small devices и по элементу будет занимать 3 столбца. Вы можете определить несколько классов, чтобы указать столбцы для каждого разрешения:

col-xs-12 col-sm-6 col-md-4 col-lg-2

Тогда это будет переводиться в следующее:

От xs Разрешения или ниже, элемент будет занимать 12 столбцов.

От sm Разрешения или выше, элемент будет занимать 6 столбцов.

От md Разрешения или выше, элемент будет занимать 4 столбца.

От lg Разрешения или выше, элемент будет занимать 2 столбца.

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

Для получения более подробной информации о сетке / системе столбцов, перейдите по этой ссылке.