Bootstrap 3使用SASS mixin更改特定容器上的网格列数和装订线宽度

网格 CSS

DavaidTony宝儿

2020-03-26

我正在尝试更改特定容器内的网格列数和装订线宽度。

最明显且最快的方法是在Bootstrap SASS中使用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');
}

如果没有,任何人有任何想法吗?


更新

经过一番坚持之后,我解决了问题并做出了自己的...

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

第3793篇《Bootstrap 3使用SASS mixin更改特定容器上的网格列数和装订线宽度》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android