1. Добавим брикпойнт и контейнер
$screen-xs-min: 520px;
$container-xs: 480px;
2. дополним класс .container
.container {
@include container-fixed;
@media (min-width: $screen-xs-min) {
width: $container-xs;
}
// … Дальше оставляем как было
}
3. поправим миксин
@mixin make-grid-columns($i: 1, $list: ".col-xxs-#{$i}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
@for $i from (1 + 1) through $grid-columns {
$list: "#{$list}, .col-xxs-#{$i} .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
}
…
4. Вызовем его
@include make-grid-columns();
5. Заменим строчку
@include make-grid(xs);
на
@include make-grid(xxs);
6. Добавим
@media (min-width: $screen-xs-min) {
@include make-grid(xs);
}
И всё!!
Теперь в промежутке от 0 до 480 можем использовать колонки xxs
480 — 768 колонки xs
а далее стандартно.
[sarkazm on]
Ничего сложного, да ведь? =)))
[sarkazm off]
Поэтому я обычно выкидываю сетку версии 3 и использую
гибрид — сетка как в третьей версии, на флоатах и т.д., но используя миксины (тоже немного доработанные) от четвёртой версии.
Там добавление брикпойнта сводится к простому добавлению значений
в пару массивов (мапов) настроек.
Средний
