19

我目前正在 SCSS 中开发 Bootstrap4。

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

根据_grid.scss

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

在引导站点上，据说：

更新了网格大小、mixin 和变量。网格排水沟现在有一个 Sass 地图，因此您可以在每个断点指定特定的排水沟宽度。

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

4

6 回答 6

17

这看起来像是文档中的错误。曾经有一张地图，但在 4.0.0 发布之前就被删除了。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

于 2018-03-15T15:22:29.140 回答
13

与 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;
    }
}
于 2019-03-14T22:22:41.060 回答
6

与 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 包。你也可以在那里找到一个非常详细的文档：https ://github.com/DZakh/Custom-gutters-bootstrap-plugin

于 2019-10-12T18:31:04.583 回答
4

Bootstrap 文档打算完成此操作的方式是在$grid-gutter-width变量上设置最小装订线宽度大小，然后一直使用边距/填充辅助类来获取更大的断点（移动优先）。

<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 填充。如果您为每个断点设置不同的宽度，这将变得相当冗长且难以阅读。我建议使用上面的替代答案。

于 2019-03-15T01:23:34.523 回答
2

跨断点的排水沟大小的可配置映射：

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

样式.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);
      }
    }
  }
}
于 2019-04-18T00:37:15.080 回答
0

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

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

于 2020-09-14T23:59:55.410 回答