Блог

Несмотря на то, что это старое, возможно, это поможет некоторым из вас.

Мой способ — это больше кода, чем, вероятно, необходимо, но я не смог придумать решение для системы bootstrap grid, которое обеспечивает различные изменения столбцов и строк в сочетании с изменениями ширины экрана.

Итак, давайте начнем:

• Переключение .scss и реализация адаптивных функций начальной загрузки
• Включите родительский div, который действует как контейнер переключения вида для вашей системы начальной загрузки
• Использование display: none !important и display: inline !important для divs
• Подсказка, установите ширину класса image на max-widht: 100%; , это заставит изображения занимать как можно больше места, не превышая его родительскую ширину; если вы, конечно, не хотите разных уникальных размеров

.scss : (проверьте свою версию bootstrap css)

 $stageZero: 540px;
$stageOneLower: 719px;
$stageOneHigher: 720px;
$stageTwoLower: 959px;
$stageTwoHigher: 960px;
$stageThree: 1140px;

@mixin stage00 {
  @media (max-width: $stageZero) { @content; }
}

@mixin stage01 {
  @media (min-width:$stageOneLower) and (max-width:$stageOneHigher)  { @content; }
}

@mixin stage02 {
  @media (min-width:$stageTwoLower) and (max-width:$stageTwoHigher) { @content; }
}

@mixin stage03 {
  @media (min-width: $stageThree) { @content; }
}
.mobileViewToggle {
    @include stage00 {display: inline !important;}
    @include stage01 {display: none !important;}
    @include stage02 {display: none !important;}
    @include stage03 {display: none !important;}
}
.desktopViewToggle {
    @include stage00 {display: none !important;}
    @include stage01 {display: inline !important;}
    @include stage02 {display: inline !important;}
    @include stage03 {display: inline !important;}
}
  

.html :

 <div class="mobileViewToggle">
    < Bootstrap Grid Code with xs prefix, e.g. col-xs-4>
</div>

<div class="desktopViewToggle">
    < Bootstrap Grid Code with sm prefix, e.g. col-sm-6>
</div>
  

Вы можете использовать приведенный ниже класс, как показано на рисунке…

1. col-xs-2 — будет два столбца только на устройствах xs — (мобильные)
2. col-md-3 — будет 3 столбца на всех устройствах, кроме мобильных

<div class="row">
<div class="col-xs-2 col-md-3">Content</div>
....
</div>
Однако вы не можете изменить строки без использования js. Более того, на мобильных устройствах это действительно имеет значение … ?