Bootstrap v4 Beta，自定義排水溝

Question

有沒有辦法在每個斷點中定製柵格排水溝？

我知道，Twitter支付數百萬美元使Bootstrap v4完美，我不想在一天內改變所有內容，但我只是好奇，這是有辦法讓我的自定義排水溝，而不是隻有一個。

像：我想在大尺寸的排水溝是30px，但在較小的設備我想這是24px和移動20px

Answer 1

您可以添加自定義排水溝這樣的：

.row.custom-gutter { 
    margin-left: 30px; 
    margin-right: 30px; 
} 

[class^='col'].custom-gutter, 
[class*=' col'].custom-gutter { 
    padding-left: 30px; 
    padding-right: 30px; 
} 

然後，您必須使用媒體查詢更新較小設備上的填充。

Answer 2

你需要去你的文件夾/ node_modules /引導/ SCSS/_variables.scss和搜索：

// Grid columns 
// 
// Set the number of columns and specify the width of the gutters. 

$grid-columns:     12 !default; 
$grid-gutter-width-base:  30px !default; 
$grid-gutter-widths: (
    xs: $grid-gutter-width-base, 
    sm: $grid-gutter-width-base, 
    md: $grid-gutter-width-base, 
    lg: $grid-gutter-width-base, 
    xl: $grid-gutter-width-base 
) !default; 

你也可以改變斷點：

// Grid breakpoints 
// 
// Define the minimum dimensions at which your layout will change, 
// adapting to different screen sizes, for use in media queries. 

$grid-breakpoints: (
    xs: 0, 
    sm: 576px, 
    md: 768px, 
    lg: 992px, 
    xl: 1200px 
) !default; 
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); 
@include _assert-starts-at-zero($grid-breakpoints);