Как установить разные столбцы для разных устройств в Bootstrap 3

Question

Я проектирую веб-страницу в Bootstrap3.

Страница имеет 6 эскизов.

• Для настольных компьютеров я хочу отобразить 3 миниатюры в строке (в 2 строках);
• Для планшетов, 2 миниатюры в строке (в 3 рядах);
• Для мобильных телефонов всего лишь один миниатюры для каждой строки (в 6 рядах, в вертикальном положении).

Есть ли простой набор классов в Bootstrap3 для этого. Я не хочу скрывать/показывать разные блоки для разных устройств. Я хочу, чтобы это было действительно отзывчивым, и хотите, чтобы столбцы сворачивались из 3 столбцов в 2 столбца в один столбец, так как браузер width уменьшает.

Возможно ли это?

Answer 1

вы можете использовать:

• col-md-4, для 3thumbs на страницу в настольном устройстве
• col-sm-6, для 2thumbs на страницу в небольших устройствах
• col-xs-12, для сложенных пальцев в дополнительных небольших устройствах

Взгляните на бутстрап docs

---

.row div:nth-of-type(2n+1) { 
 
    background: red; 
 
    height: 100px 
 
} 
 
.row div:nth-of-type(2n) { 
 
    background: lightblue; 
 
    height: 100px 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 .col-sm-6 .col-md-4</div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 .col-sm-6 .col-md-4</div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 .col-sm-6 .col-md-4</div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 .col-sm-6 .col-md-4</div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 .col-sm-6 .col-md-4</div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 .col-sm-6 .col-md-4</div> 
 
    </div> 
 
</div>

Answer 2

1. Grid options: col-xs-12 занимает всю строку на мобильные телефоны; col-sm-6 занимает половину строки на планшетах; col-md-4 занимает одну треть строки на рабочих столах.

2. Если эскизы имеют разную высоту, вторая строка может попасть на одну из них и начать раньше, чем необходимо. Чтобы избежать этого, we add a classclearfix перед началом новой строки.

3. Нам нужны две строки на планшете и три строки на рабочем столе. Поэтому мы должны использовать разные блоки с классом clearfix на экранах различной ширины. Классы visible-sm-block, visible-md-block и visible-lg-block являются toggling content across viewport breakpoints.

4. Изображение с классом img-responsivescales nicely to the parent element.

.thumbnails img { 
 
    margin: 10px auto; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row thumbnails"> 
 
    <div class="col-xs-12 col-sm-6 col-md-4"><img src="http://placehold.it/300x400/c69/" class="img-responsive" alt=""></div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4"><img src="http://placehold.it/320x380/9c6/" class="img-responsive" alt=""></div> 
 
    <div class="clearfix visible-sm-block"></div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4"><img src="http://placehold.it/340x360/69c/" class="img-responsive" alt=""></div> 
 
    <div class="clearfix visible-md-block visible-lg-block"></div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4"><img src="http://placehold.it/360x340/c69/" class="img-responsive" alt=""></div> 
 
    <div class="clearfix visible-sm-block"></div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4"><img src="http://placehold.it/380x320/9c6/" class="img-responsive" alt=""></div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4"><img src="http://placehold.it/400x300/69c/" class="img-responsive" alt=""></div> 
 
    </div> 
 
</div>