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