Bootstrap 3 thay đổi số cột lưới và chiều rộng máng xối trên các thùng chứa cụ thể bằng cách sử dụng SASS mixin

Question

Tôi đang cố gắng thay đổi số lượng cột-lưới và chiều rộng rãnh trong các thùng chứa cụ thể.

Cách rõ ràng và nhanh nhất là sử dụng mixin trong Bootstrap SASS.

Không có một mixin xử lý tất cả điều này trong một? Tôi gặp khó khăn khi thấy một tập hợp tất cả các mixin trong _grid.scss

Ví dụ, tôi đang tìm một cái gì đó như thế này.

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

-

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

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

Nếu không, bất kỳ một có bất kỳ ý tưởng?

---

CẬP NHẬT

Sau một kiên trì nhỏ, tôi đã làm việc nó ra và làm cho riêng tôi ...

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

} 

Chỉ cần chạy như thế này ...

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

Answer 1

Đây là giải pháp của tôi:

Đầu tiên thiết lập vars mới (đây là chỉ dành riêng cho thiết lập cột thức chung, chứ không phải cho những thay đổi cụ thể) trong vars.scss

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

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

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

Đây là mixin mà tôi giữ trong 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; 

} 

Hãy chắc chắn rằng thứ tự của việc nhập khẩu SCSS là như thế này ..

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

Mixin dụ sử dụng là như vậy ...

/************************************ 
***** 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); 
    } 
} 

Hope this helps. Vui lòng cải thiện :-)