Twitter bootstrap 在Bootstrap4中，如何根据断点更改内部$grid边沟宽度？

我目前正在SCSS中开发Bootstrap4

我只想更改smartphone上的内部$grid边沟宽度

根据_grid.scss

$grid columns:12！违约
$grid檐槽宽度：30px！违约

在bootstrap站点上，可以看到：

更新的网格大小、混合和变量。栅格檐槽现在具有Sass贴图，因此可以在每个断点处指定特定的檐槽宽度

我找不到地图，也找不到怎么做。
这看起来像是文档中的一个错误。曾经有一张地图，但在4.0.0发布之前。然而，对于使用SASS的
xs
来说，添加这一点是相当容易的。例如手机上的5px

@media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, sm)){
    .row > .col,
    .row > [class*="col-"] {
      padding-right: 5px;
      padding-left: 5px;
    }
}

与Zim的答案相同，但使用行修复并使用$grid GOOTH with变量。如果您使用预处理器，效果会好10%

更新：我添加了更多样式以保留
的功能。没有以前损坏的排水沟

// HALF GUTTER WIDTH ON XS
@media (max-width: map-get($grid-breakpoints, sm)){
    .row:not(.no-gutters) {
        margin-right: -$grid-gutter-width / 4;
        margin-left: -$grid-gutter-width / 4;
    }
    .row:not(.no-gutters) > .col,
    .row:not(.no-gutters) > [class*="col-"] {
        padding-right: $grid-gutter-width / 4;
        padding-left: $grid-gutter-width / 4;
    }
}

实现这一点的方法是，在
$grid gotter width
变量上设置最小檐槽宽度大小，然后使用margin/padding帮助器类来设置更大的断点（首先是mobile）


自定义列填充
自定义列填充

在本例中，他们在行上设置负x边距，然后在每列上设置相同数量的x填充。如果您为每个断点设置不同的宽度，那么这将变得相当冗长且难以阅读。我建议使用上面的备选答案
 跨断点的排水沟大小的可配置映射：

\u设置.scss

// Grid columns

// Custom map of gutter widths across breakpoints.
$grid-gutter-widths: (
  xs: 16px,
  md: 20px,
);
// Default Bootstrap gutter width variable.
$grid-gutter-width: map-get($grid-gutter-widths, md);

@import './settings';
@import 'node_modules/bootstrap/scss/bootstrap';

.container {
  @each $breakpoint, $gutter in $grid-gutter-widths {
    @include media-breakpoint-up($breakpoint) {
      @include make-container($gutter);
    }
  }
}

.row {
  @each $breakpoint, $gutter in $grid-gutter-widths {
    @include media-breakpoint-up($breakpoint) {
      @include make-row($gutter);
    }
  }

  .row > .col,
  .row > [class*='col-'] {
    @each $breakpoint, $gutter in $grid-gutter-widths {
      @include media-breakpoint-up($breakpoint) {
        @include make-col-ready($gutter);
      }
    }
  }
}

样式。scss

// Grid columns

// Custom map of gutter widths across breakpoints.
$grid-gutter-widths: (
  xs: 16px,
  md: 20px,
);
// Default Bootstrap gutter width variable.
$grid-gutter-width: map-get($grid-gutter-widths, md);

@import './settings';
@import 'node_modules/bootstrap/scss/bootstrap';

.container {
  @each $breakpoint, $gutter in $grid-gutter-widths {
    @include media-breakpoint-up($breakpoint) {
      @include make-container($gutter);
    }
  }
}

.row {
  @each $breakpoint, $gutter in $grid-gutter-widths {
    @include media-breakpoint-up($breakpoint) {
      @include make-row($gutter);
    }
  }

  .row > .col,
  .row > [class*='col-'] {
    @each $breakpoint, $gutter in $grid-gutter-widths {
      @include media-breakpoint-up($breakpoint) {
        @include make-col-ready($gutter);
      }
    }
  }
}

与Arajay的答案相同，但具有一些自动化功能，可以为每个断点选择特定的边沟宽度：


/* Specify your own gutters for every breakpoint. I use media-breakpoint-up so to avoid a default width it's better to always include "xs", and then you can do whatever you want */
$grid-gutter-widths: (
  xs: 10px,
  /* "sm" takes the same width as "xs" automatically */
  md: 20px,
  lg: 30px
);

/* You don't need to change anything below */
@each $grid-breakpoint, $grid-gutter-width in $grid-gutter-widths {
  @include media-breakpoint-up($grid-breakpoint) {
    $grid-gutter-half-width: $grid-gutter-width / 2;
    .row:not(.no-gutters) {
      margin-right: -$grid-gutter-half-width;
      margin-left: -$grid-gutter-half-width;
    }
    .row:not(.no-gutters) > .col,
    .row:not(.no-gutters) > [class*="col-"] {
      padding-right: $grid-gutter-half-width;
      padding-left: $grid-gutter-half-width;
    }
  }
}

我建议以后调整$container max widths，因为它可能会稍微更改原始宽度

UPD：我用这个解决方案做了一个小的npm包。你也可以在那里找到一个非常详细的文档：
我刚刚制作了一个包，允许定制每个断点的水槽和容器边距：

对于那些对纯SCSS解决方案感兴趣的人来说，这是一种有效的方法，因为它首先改变了引导CSS的生成方式，而不是在已经生成的CSS之后添加覆盖。它非常适合在构建链中使用，例如，与从npm软件包编译
css
的Webpack一起使用。
这是一个非常好的实现方法。谢谢在这个过程中，最好给row元素添加一些覆盖以保持正确的网格：。row{margin right:-5px；margin left:-5px；}回答得很好，但最后一个右括号应该移到“.row>.col”之前