Css Bootstrap v4 Beta版，定制水槽

有没有办法在每个断点中自定义网格水槽

我知道，Twitter花了数百万美元来完善Bootstrap v4，我不想在一天内改变一切，但我只是好奇，有没有一种方法可以让我定制排水沟，而不仅仅是一个

---

例如：我希望大尺寸的排水沟为

30px

，但在较小的设备上，我希望排水沟为

24px

，在移动设备上，排水沟为

20px

您可以这样添加自定义排水沟：

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

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

---

然后，您必须使用媒体查询更新较小设备上的填充。

您需要进入文件夹/node\u modules/bootstrap/scss/\u 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);

---

我刚刚制作了一个包，允许定制每个断点的水槽和容器边距：

看起来每个断点混合的水槽都是从beta 1@ZimSystem中删除的。我刚刚在他们的回购协议中也读到了这一点，这将是很好的，但他们从beta中删除了这对我来说是完美的。我甚至从来没有想过在col类（^和*）中同时使用这两个选择器，但这绝对是必要的。谢谢