Bootstrap responsive multi columns with collapse

Question

Пожалуйста, помогите мне, как это сделать, используя boostrap 3. Я приложил три снимка, сделанные с рабочего стола с различными размерами экрана. responsive (desktop, ipad, iphone

Answer 1

Я думаю, что вы можете создавать вложенные группы групп, и, изменяя их ширину, вы можете создать отзывчивый дизайн. Используя что-то вроде:

<div class="col-lg-2 col-md-3 col-sm-12 col-xs-12"> ... </div> 

С этим, как вы можете, но 6 колонок бок о бок в больших экранах, и только один столбец для каждой строки в небольших экранах.

Бутстрап следует использовать с подходом «мобильный первый дизайн». Поэтому сначала вы должны спроектировать свой экран в соответствии с меньшими экранами, а затем вы должны рассмотреть больший размер экрана.

Я советую вам провести некоторое время в

А вот пару демок для вложенных списков групп:

consistent-styling-for-nested-lists-with-bootstrap

nested list group example

Я надеюсь, что это дает вам отправную точку ,