Question

我目前正在研究SCSS中的Bootstrap4。

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

根据_grid.scss

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

在引导网站上，它是：

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

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

Answer 1

这看起来像是文档中的错误。曾经有过地图，但4.0.0之前的it was removed已经发布。但是，使用SASS将@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; } }添加为相当容易。例如移动设备上的5px ......

          http
            .csrf().disable()
            .antMatcher("/**")                
            .authorizeRequests()
            .antMatchers("/", "/login**", "/error**")
            .permitAll()
            .anyRequest().authenticated();

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

Answer 2

与Zim的答案相同，但具有行修复功能，并使用$ grid-gutter-width变量。好10％

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

Answer 3

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

Answer 4

Bootstrap documentation打算做到这一点的方法是在<color name="line">#f1ecec</color>变量上设置最小装订线宽度大小，然后一直使用margin / padding helper类来获取较大的断点（移动首先）。

$grid-gutter-width

在此示例中，他们在行上设置负的x边距，然后在每列上设置相同的x填充量。如果您为每个断点设置不同的宽度，那么它将变得非常冗长且难以阅读。

Answer 5

跨断点可配置的装订线尺寸图：

_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 6

我刚刚制作了一个程序包，该程序包可以自定义每个断点的装订线和容器边距：https://github.com/BenceSzalai/bootstrap-responsive-grid

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

在Bootstrap 4中，如何根据断点更改内部$ grid-gutter-width？

6 个答案: