Bootstrap 4、如何根据断点改变内部$grid-gutter-width？

Question

我目前正在 SCSS 中开发 Bootstrap4。

我只想在智能手机上更改内部 $grid-gutter-width。

根据_grid.scss

$grid-columns: 12 !default; $grid-gutter-width: 30px !default;

在 bootstrap 网站上，据说：

Updated grid sizes, mixins, and variables. Grid gutters now have a Sass map so you can specify specific gutter widths at each breakpoint.

我找不到地图以及如何完成。

Answer 1

这看起来像是文档中的一个错误。曾经有一张地图，但是在4.0.0发布之前it was removed。但是，将 xs 添加到 SASS 会相当容易。例如在移动设备上为 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;
    }
}

https://www.codeply.com/go/XgynFzTmGv

Answer 2

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

更新：我添加了更多样式以保留 .no-gutters 的功能，该功能之前已损坏。

// 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;
    }
}

Answer 3

Bootstrap documentation 打算完成此操作的方法是在 $grid-gutter-width 变量上设置最小间距宽度，然后使用 margin/padding 助手类 all通往更大断点的道路（移动优先）。

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>

在示例中，他们在行上设置负 x 边距，然后在每列上设置相同数量的 x 填充。如果您为每个断点设置不同的宽度，这将变得相当冗长且难以阅读。我建议使用上面的替代答案。

Answer 4

跨断点的间距大小的可配置映射：

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

styles.scss

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

Answer 5

与 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，因为它有可能会稍微改变原始宽度。

更新：我用这个解决方案做了一个小的 npm 包。您还可以在那里找到非常详细的文档：https://github.com/DZakh/Custom-gutters-bootstrap-plugin

Answer 6

我刚刚制作了一个包，允许根据 break-point 自定义装订线和容器边距：https://github.com/BenceSzalai/bootstrap-responsive-grid

对于那些对纯 SCSS 解决方案感兴趣的人来说，这可能是一种有效的方法，因为它改变了首先生成 Bootstrap CSS 的方式，而不是在之后添加覆盖已经生成的CSS。非常适合在构建链中使用，例如使用 Webpack 从 npm 包编译 css。

Bootstrap 4、如何根据断点改变内部$grid-gutter-width？

In Bootstrap 4, how to change inner $grid-gutter-width depending to breakpoints?

sass

gutter

twitter-bootstrap

bootstrap-4