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

您需要在 your-folder/node_modules/bootstrap/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);

Answer 3

我刚刚制作了一个包，允许自定义每个断点的排水沟和容器边距：https://github.com/BenceSzalai/bootstrap-responsive-grid