我正在改变特定容器中的网格列数和格栅宽度.
明显而最快捷的方式是在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 );
}
}
希望这可以帮助.随意改进:-)