Bootstrap 3使用SASS mixin来更改特定容器上的网格列数和栅格宽

发布时间：2020-12-18 00:19:29 所属栏目：安全来源：网络整理

导读：我正在改变特定容器中的网格列数和格栅宽度. 明显而最快捷的方式是在Bootstrap SASS中使用mixin. 没有一个mixin可以处理所有这一切吗？我努力看到一个运行在_grid.scss中的所有mixins 例如,我正在寻找这样的东西. @mixin new-grid-system($grid-columns,$gri

我正在改变特定容器中的网格列数和格栅宽度.

明显而最快捷的方式是在Bootstrap SASS中使用mixin.

没有一个mixin可以处理所有这一切吗？我努力看到一个运行在_grid.scss中的所有mixins

例如,我正在寻找这样的东西.

@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');
}

解决方法

这是我的解决方案：

首先在vars.scss中设置新的vars(这只是为了覆盖列设置而不是具体的更改)

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

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

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

这是我在mixins.scss中的mixin

@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 );
    }
}

希望这可以帮助.随意改进:-)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!