Bootstrap 3 изменяет количество столбцов сетки и ширину желоба на конкретных контейнерах с использованием SASS mixin

Я пытаюсь изменить количество столбцов сетки и ширину желоба в определенных контейнерах.

Очевидным и самым быстрым способом было бы использовать mixin в Bootstrap SASS.

Нет ли одного mixin, который обрабатывает все это в одном? Я изо всех сил пытаюсь увидеть, как один запускает все миксины в _grid.scss

Например, я ищу что-то вроде этого.

@mixin new-grid-system($grid-columns, $grid-gutter-width);

-

.gallery {
   @include new-grid-system('10', '10px');
}

.gforms {
   @include new-grid-system('9', '10px');
}

Если нет, у кого-нибудь есть идеи?

UPDATE

После небольшой настойчивости я справился и сделал свой собственный...

@mixin new-grid-system($new-grid-columns, $new-grid-gutter-width) {

    $grid-columns: $new-grid-columns;
    $grid-gutter-width: $new-grid-gutter-width;  

    .row {
        @include make-row();
    }

    @include make-grid-columns();
    @include make-grid(xs);
    @media (min-width: $screen-sm-min) {
        @include make-grid(sm);
    }
    @media (min-width: $screen-md-min) {
        @include make-grid(md);
    }
    @media (min-width: $screen-lg-min) {
        @include make-grid(lg);
    }

}

Просто запустите, как это...

.gallery {
   @include new-grid-system('10', '10px');
}

Ответы

Ответ 1

Вот мое решение:

Сначала установите новые vars (это только для настройки избыточного столбца, а не для конкретных изменений) в vars.scss

/************************************
***** column vars
*************************************/

$new-columns :                  12;
$new-gutter-width :             40px;

$grid-columns :                 $new-columns;
$grid-gutter-width :            $new-gutter-width;


Вот mixin, который я держу в mixins.scss

@mixin column-adjust($column,$gutter) {

    // set custom variables for our grid structure
    $grid-columns: $column !global;
    $grid-gutter-width: $gutter !global;

    .row {
        @include make-row();
    }
    @include make-grid-columns();
    // @include make-grid(xs);
    @media (min-width: $screen-sm-min) {
        @include make-grid(sm);
    }
    @media (min-width: $screen-md-min) {
        @include make-grid(md);
    }
    @media (min-width: $screen-lg-min) {
        @include make-grid(lg);
    }

    // reset global vars;
    $grid-columns: $new-columns !global;
    $grid-gutter-width: $new-gutter-width !global;

}


Убедитесь, что порядок импорта scss выглядит следующим образом.

@import 'vars';
@import 'mixins';


Использование примера Mixin аналогично...

/************************************
***** grid changes
*************************************/

.grid {
    &.grid-10-across {
        @include column-adjust(10, $grid-gutter-width );
    }
    &.grid-24-across {
        @include column-adjust(24, $grid-gutter-width );
    }
}

.gutter-slim {
    &.gutter-slim-10 {
        @include column-adjust($new-columns, 10px );
    }
    &.gutter-slim-6 {
        @include column-adjust($new-columns, 6px );
    }
}


Надеюсь, это поможет. Не стесняйтесь улучшать: -)