大佬教程收集整理的这篇文章主要介绍了Bootstrap 3使用SASS mixin来更改特定容器上的网格列数和栅格宽度，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
明显而最快捷的方式是在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'); }
如果没有,有什么想法？
@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;
@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 ); } }
希望这可以帮助.随意改进:-)
以上是大佬教程为你收集整理的Bootstrap 3使用SASS mixin来更改特定容器上的网格列数和栅格宽度全部内容，希望文章能够帮你解决Bootstrap 3使用SASS mixin来更改特定容器上的网格列数和栅格宽度所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。